Geek Answers Handbook

Bootstrap JavaScript requires jQuery While jQuery is already loaded

I encountered an error while loading the Bootstrap library, as it always gives this error:

Unprepared bug: Bootstrap JavaScript requires jQuery

Although I am attaching the Bootstrap library after jQuery loaded, I still get the error.

I use the following code to attach jQuery to a page by creating an element and adding it to document :

 /******** Load jQuery if not present *********/ if (window.jQuery === undefined || window.jQuery.fn.jquery !== '3.1.1') { console.log("jQuery LOADED"); var script_tag = document.createElement('script'); script_tag.setAttribute("type", "text/javascript"); script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"); // Try to find the head, otherwise default to the documentElement (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); if (script_tag.readyState) { script_tag.onreadystatechange = function () { // For old versions of IE if (this.readyState == 'complete' || this.readyState == 'loaded') { console.log(window.jQuery.fn.jquery); scriptLoadHandler(); } }; } else { console.log("ONLOAD STATE"); script_tag.onload = scriptLoadHandler; } } else { // The jQuery version on the window is the one we want to use jQuery = window.jQuery; main(); } function scriptLoadHandler() { // Restore $ and window.jQuery to their previous values and store the // new jQuery in our local jQuery variable jQuery = window.jQuery.noConflict(true); // Call our main function main(); }

Here I create Bootstrap after document :

 function main() { jQuery(document).ready(function ($) { var bootstrap_script = document.createElement('script'); bootstrap_script.setAttribute("type", "text/javascript"); bootstrap_script.setAttribute("src", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"); (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(bootstrap_script); }) }

Just to clarify the critical thing, I am writing js code in a separate js file because I want to use it later as a jQuery plugin . Thus, I am trying to attach libraries, since I cannot guarantee that the landing page will include these libraries or not.

+7
javascript jquery html twitter-bootstrap
source share
4 answers

Try loading jquery using https

 script_tag.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js");

Hope it works.

+1
source share

you have no ")}" in your "main" function. after fixing this, the boot boot is loading for me without any errors. I am using firefox 50.1.0

here is your code that works for me:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document</title> </head> <body> <script> /******** Load jQuery if not present *********/ if (window.jQuery === undefined || window.jQuery.fn.jquery !== '3.1.1') { console.log("jQuery LOADED"); var script_tag = document.createElement('script'); script_tag.setAttribute("type", "text/javascript"); script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"); // Try to find the head, otherwise default to the documentElement (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); if (script_tag.readyState) { script_tag.onreadystatechange = function () { // For old versions of IE if (this.readyState == 'complete' || this.readyState == 'loaded') { console.log(window.jQuery.fn.jquery); scriptLoadHandler(); } }; } else { console.log("ONLOAD STATE"); script_tag.onload = scriptLoadHandler; } } else { // The jQuery version on the window is the one we want to use jQuery = window.jQuery; main(); } function scriptLoadHandler() { // Restore $ and window.jQuery to their previous values and store the // new jQuery in our local jQuery variable jQuery = window.jQuery.noConflict(true); // Call our main function main(); } function main() { jQuery(document).ready(function ($) { var bootstrap_script = document.createElement('script'); bootstrap_script.setAttribute("type", "text/javascript"); bootstrap_script.setAttribute("src", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"); (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(bootstrap_script); }) } </script> </body> </html>
+4
source share

The problem is that you are using a higher version. Use this version:

 http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
+1
source share

Why is it so hard?

Just add this to your <head>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>

Or add the latter to your document for faster downloads. Then you need to use the finished document in your scripts so that they do not run before jQuery loads.

0
source share

More articles:


All Articles