This is an article written to discuss an error shown because of a certain execution of page developed using Laravel framework based on PHP Programming Language. It is actually simple error based on the usage of Bootstrap which is inappropriate because of lacking of something. Below is the image depicting on the situation or the condition relate to the error stated in the title of the article, “Bootstrap’s javascript requires jquery version 1.9.1 or higher, but lower than version 4 :
The above error page is not directly represent the actual page of the page where Bootstrap is used but it is actually a plugin installed in Mozilla Firefox called ‘Firebug’ specifically useful for Javascript debugging on Web browser. It is focusing on editing, debugging and monitoring the test and implementation of CSS, HTML and Javascript real-time on a web page. It is integrated with Mozilla Firefox and it can be activated at any time as long as it has already been installed.
Based on the above display on the Console tab of Firebug, there is an error message generated states “Bootstrap’s javascript requires jquery version 1.9.1 or higher, but lower than version 4”. Well, it is obviously happened having Bootstrap imported and used in a web page.
In this context, the web page which is being executed is developed based on Laravel framework. In Laravel framework, one of the method for displaying the webpage is by creating a the view which is being managed using a blade template files. Those files located in resources/views.
So, in order to create a web page with an arranged position of every elements on that page, many developers use Bootstrap framework which offers grid system for placing each elements on the page. In Laravel framework, to be able to use Bootstrap, it need to be imported first.
To be able to import it, below is how to actually done it :
1.Download Bootstrap library.
2. Extract the downloaded Bootstrap library if it is normally downloaded in a compressed file.
3. After extracting the files, search for CSS and Javascript files which Bootstrap provided.
4. Place the necessary files mentioned in the third step in order to import Bootstrap in public/css for every CSS files and in public/js for every Javascript files. In this case, bootstrap.css in public/css and bootstrap.js in public/js.
5. After placing the necessary file, import it in the blade view template file as by defining the following snippet code shown below :
<link rel="stylesheet" href="{{ URL::asset('css/bootstrap.min.css') }}"></link>
<script src="{{ URL::asset('js/bootstrap.min.js') }}"></script>
In the above definition, Laravel blade view template file is using {{ URL::asset … }} to specify the location of the files needed to be imported. In this case, it s the CSS and Javascript related to Bootstrap. And it is pointing out to folder ‘public/’. So, to be able to find the actual file, it need to be added with its associated folder which is css for CSS file folder and js for Javascript file folder as shown above.
But on executing the blade view file template which is used by accessing certain route URL which has been defined in ‘routes/web.php’ on Laravel 5.3 version triggers the above error.
That is because Bootstrap needs compatible JQuery library to be imported. So, in order to solve the problem below is the following solution taken :
1. Download JQuery library. Since the error message states the version needs JQuery with the version of 1.9.1 or higher and it must be lower than version 4, the version used for JQuery is 3.2.1
2. Extracted it if it is downloaded in a compressed version. Choose either the full or minified version of the JQuery it has nothing to do with it for solving the problem.
3. Copy it to the following folder located in root folder of Laravel project installation which is there i ‘public/js’.
4. After successfully copied it, define the import statement for using it in the page as shown below :
<script src="{{ URL::asset('js/jquery-3.2.1.min.js') }}"></script>
So, the full snippet code placed in the blade view template file is shown below :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ URL::asset('css/bootstrap.min.css') }}"></link>
<script src="{{ URL::asset('js/jquery-3.2.1.min.js') }}"></script>
<script src="{{ URL::asset('js/bootstrap.min.js') }}"></script>
</head>