Topic: Laravel Order-Issue: toastr || sideNav || Tooltip not work
Expected behavior
I add my JS files to my laravel application html code in following order:
- Header:
- jQuery
- Bootstrap
- mdbpro
Now i can use toastr, the sideNav, the tooltips and all the other wonderful components from mdbootstrap pro.
Actual behavior
When i add all the JS Files to the footer, the sideNav and the tooltips works fine but the toastr gives an error: ReferenceError: toastr is not defined
When i add the JS Files to the header, the sideNav gives an error: TypeError: $(...).sideNav is not a function and the tooltip don´t work and, well, actually nothing works.
Resources (screenshots, code snippets etc.)
With webpack, i implement the JS files in following order:
window.Popper = require('popper.js').default;
//It´s not running without this: (ReferenceError: $ is not defined):
window.$ = window.jQuery = require('jquery');
require('./../../node_modules/mdbootstrap-pro/js/bootstrap.js');
require('./../../node_modules/mdbootstrap-pro/js/mdb.js');
And the SCSS Files in this Order:
@import '~mdbootstrap-pro/css/bootstrap.min.css';
@import '~mdbootstrap-pro/scss/mdb';
I added the JS file in my HTML-Header:
<script src="{{ asset('js/app.js') }}"></script>
ReferenceError: toastr is not defined
TypeError: $(...).sideNav is not a function
Hope you have an solution. Regards
I think, our webpack tutorial can help you a little bit
Tenarius commented 5 years ago
Your linked webpack tutorial is nice but not a solution for my problem. My webpack configuration works perfectly (by the way i use the file webpack.mix.js to put my data together).
My improvised solution is to include jQuery at the top of the html code (i load it two times...) and pull any js-file from mdbootstrap pro separately in my project.
Top:
try {
window.$ = window.jQuery = require('jquery');
window.toastr = require('./../../node_modules/mdbootstrap-pro/js/modules/vendor/toastr.js');
} catch (e) {}
Bottom:\
try { window.$ = window.jQuery = require('jquery');
require('./../../node_modules/mdbootstrap-pro/js/bootstrap.js');
require('./../../node_modules/mdbootstrap-pro/js/mdb.js');
} catch (e) {}
Arkadiusz Cacko staff pro premium priority commented 5 years ago
Hi @Tenarius! Are you sure that app.js file is included correctly? If you are using assets(), the files must located in the public folder. Please check in console that the file don't return 404 error. Regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.8
- Device: PC
- Browser: Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: No