Laravel Order-Issue: toastr || sideNav || Tooltip not work


Topic: Laravel Order-Issue: toastr || sideNav || Tooltip not work

Tenarius asked 5 years ago

Expected behavior
I add my JS files to my laravel application html code in following order:

  • Header:
    1. jQuery
    2. Bootstrap
    3. 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


Bartłomiej Malanowski staff pro premium answered 5 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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