Bootstrap's Javascript Requires Jquery While Jquery Is Already Loaded
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 Bootst
Solution 1:
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><htmllang="en"><head><metacharset="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 IEif (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();
}
functionscriptLoadHandler() {
// 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 functionmain();
}
functionmain() {
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>Solution 2:
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.
Solution 3:
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
Solution 4:
Why make it so complicated?
Just add this inside your <head>
<scriptsrc="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.
Post a Comment for "Bootstrap's Javascript Requires Jquery While Jquery Is Already Loaded"