CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Husain Alhamali
Husain Alhamali

Reputation: 823

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 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

Upvotes: 8

Views: 9175

Answers (4)

TheCrazyProfessor
TheCrazyProfessor

Reputation: 949

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.

Upvotes: 0

Curiousdev
Curiousdev

Reputation: 5778

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.

Upvotes: 1

Abdelaziz Mokhnache
Abdelaziz Mokhnache

Reputation: 4349

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>

Upvotes: 4

ab29007
ab29007

Reputation: 7766

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

Upvotes: 1

Related Questions