Menu
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
805
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>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.
23
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
