Search code examples
jquerylaravel

jQuery isn't working properly in Laravel 8

I wanted to use DataTables(jquery plugin) in my Laravel project.

So, I put required js and css file links (using cdn) in my blade template, except jquery. Because I know jquery is already there ( linked in my blade template via 'js/app.js') as I'm using Laravel UI package. additionally, running $().jquery in my browser console shows I've jquery 3.5.1.. aslo bootstrap 4.* is using that.

But I'm getting this - "uncaught referenceError....", behaving like I don't have jQuery.(jQuery scripts are also not working) please see attached image

So, I added jQuery cdn link and got "jQuery deffered exception"

Well, then I removed "js/app.js" from my blade layout. Now DataTables works,jQuery scripts also work, but bootStrap stops working.

How Can I solve this?!!

Solution

  • I found an unusual solution.
    If we load app.js in 'deferred' manner, which is default, the problem arises.

    <script src="app.js" defer></script>

    And just removing defer attribute solves the problem.

    <script src="app.js"></script>

    Reason:
    DataTable loads when the page loads. But with defer attribute jQuery loads after the page is loaded. So datatable throws the error that, it couldn't find jQuery.