Level 11
Are you loading bootstrap's javascript file before you call that method? I don't see bootstrap.js or bootstrap.min.js in there.
Aug 23, 2018
4
Level 1
"Uncaught TypeError: $(...).carousel is not a function" - jQuery
Hello.
I am a beginner to Laravel development, as I am in the process of recreating a website I previously made. However, I am stuck on one page, which involves the use of a Bootstrap carousel which uses a jQuery script to switch the current image, either by the carousel-control prev/next buttons or smaller image thumbnails underneath.
For some odd reason, the carousel does not switch image, always resulting in an error message that says "Uncaught TypeError: $(...).carousel is not a function". This is especially weird, as this code has worked previously. Here is my code below.
The Carousel In Question (HTML code in .blade.php view file) -
@extends ('layouts.app') @section ('title', $obj->name) @section ('content) ...... ...... ......
The Scripting Portion -
@section('page-js-files')
<script src="{{ URL::asset('js/jquery.js') }}"></script>
@endsection
@section('page-js-script')
<script type="text/javascript">
jQuery(function ($) {
$.noConflict();
$(document).ready(function () {
$('#print-button').click(function (e) {
e.preventDefault();
});
$('.carousel-inner').hide().fadeIn(600);
$('.carousel-control-prev').click(function () {
$('#my-page-carousel').carousel('prev');
});
$('.carousel-control-next').click(function () {
$('#my-page-carousel').carousel('next');
});
var timer = 100;
$('.my-picture-slides').children().each(function () {
$(this).hide().delay(timer).fadeIn(timer);
timer += 100;
$(this).click(function () {
var currentVal = parseInt($(this).attr("value"));
$('#my-page-carousel').carousel(currentVal);
});
$(this).mousedown(function () {
$(this).css('border', '5px solid blue');
$(this).css('-webkit-filter', 'brightness(50%)');
$(this).css('filter', 'brightness(50%)');
});
$(this).mouseup(function () {
$(this).css('border', '');
$(this).css('-webkit-filter', '');
$(this).css('filter', '');
});
});
});
});
</script>
@endsection
The main template view (layouts.app) -
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@yield('title') - Company Name</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
The jQuery file loads fine, as the onclick listeners for each thumbnail and prev/next carousel-control buttons all work. It's just that the .carousel() method is no longer being recognized.
Is there anything I could do?
Level 1
I'm not sure. I'm assuming that Bootstrap is built-in in Laravel, and it might be already loaded in the script tag in my layouts.app in the js/app.js file.
Update: I added a script link to a bootstrap.js file I have recently added, and it works now. Much thanks for your answer.
Level 67
So check it! It also loads jquery by default, so you don't need to do it manually like you are in the view. You need your scripts to load in a specific order (jquery first, bootstrap if you're using it, the carousel plugin, followed by your custom code that uses the libraries).
It's generally not a good idea to just use laravels default bootstrap file. Or at least check what it's loading. Most likely you don't need all of the packages that it includes by default (jquery/vue/axios/bootstrap/lodash and a few other packages).
So check the npm package.json file and see what's being included. Remove all that aren't used.
Then check /resources/assets/js/bootstrap.js (this isn't the bootstrap css framework) and remove everything referencing the files that you removed from the package.json.
Do the same thing in /resources/assets/js/app.js
Then run npm install and npm run dev again to compile them.
Level 1
Okay. Will do, thanks.
Please or to participate in this conversation.