Bootstrap's JavaScript requires jQuery While jQuery is already loaded
Question
I'm facing an error with loading the Bootstrap library as it always gives this error:
Uncaught Error: Bootstrap's JavaScript requires jQuery
Despite that I'm attaching the Bootstrap library after making sure the jQuery is loaded but still getting the error.
I'm using the following code to attach the jQuery to the page by creating the element and append it to the 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'm creating the Bootstrap after document is being ready:
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 a critical thing I'm writing the js code in a separated js file, because I want to use later as a jQuery plugin . Thus, I'm trying to attach the libraries as I don't guarantee that the targeted page would include those libraries or not
4 answers
solution1
4 2016-12-26 10:05:52
you have a missing ")}" in your "main" function. after correcting this, bootstrap loads successfully for me without giving any error. I'm 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>
solution2
1 2016-12-26 09:38:45
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
solution3
1 ACCPTED 2016-12-26 11:11:38
Try to load jquery using https
script_tag.setAttribute("src",
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js");
Hope it'll work.
solution4
0 2016-12-26 10:31:00
Why make it so complicated?
Just add this inside your <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
Or add it last in your document to enable a faster load. You then need to use document ready on your scripts so they don't run before the jQuery has been loaded.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.