ReferenceError: $ is not defined using jquery for bootstrap

By Posted on

In this article, an error which is located or it is similar with the one defined in the title ‘ReferenceError: $ is not defined’ using jquery for bootstrap’. It is happened in the context when a Laravel based web page is being executed. Using Bootstrap to arrange the elements exist in the web page to look better using the grid system, it needs JQuery library so that it can be functioned properly.

The JQuery library needed is in a form of Javascript file. But in this context, the function of a JQuery file based on Javascript type is not only for supporting the usage of Bootstrap but also to support the execution of JQuery snippet code itself.

For an example, disabling a tab so that it cannot be accessed, it is actually can be done with the help of JQuery. For an example, if there is a file importing JQuery where in this context, it is in the form of blade view template executed based on Laravel framework, after defining as shown below : 

<script src="{{ URL::asset('js/jquery-3.2.1.min.js') }}"></script>

Below is how to do it in a blade view in order to block the tab for being accessed : 

$(document).ready(function () {
    $('.nav li').not('.active').addClass('disabled');
}

The most important thing to be remembered is to define the above snippet code in the blade view template file after importing the JQuery Javscript file so that the snippet code containing JQuery function will be executed properly. Usually the importing step is done in the head section as shown below : 

...
<script src="{{ URL::asset('js/jquery-3.2.1.min.js') }}"></script>
...

And after that, way below the already defined import process of the JQuery, the placement of the snippet code contains specific function using JQuery help will be placed. The following error will be shown instead if the JQuery file cannot be found :

The last error generated and displayed in the above console panel as part of Firebug utility installed in Mozilla Firefox successfully monitored it. It is the consequence of not having JQuery based Javascript file successfully imported. So, make sure that JQuery based Javascript file is properly executed so that in order to solve the error or the problem specified in the title. In this case, the file named ‘jquery-3.2.1.min.js’ is copied into a folder named ‘public/js’ located in the root folder of Laravel-based web project application.

Leave a Reply