How to include jQuery dynamically in any website using pure javascript

Question

I am trying to include jquery dynamically and i have used the following code-

index.php

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="includejquery.js"></script>
</head>
<body>
<div id="testing"></div>

<script type="text/javascript">
    $(document).ready(function(){
        $('#testing').html('<p>This is a paragraph!</p>');
    });
</script>
</body>
</html>

includejquery.js

if(!window.jQuery)
{
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.async = true;
    script.src = "http://code.jquery.com/jquery-2.1.1.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
    jQuery.noConflict();
}

But jquery functionality is not working it is not printing the paragraph tag :-( Please help me out. Thanks in advance

score 5 · Accepted Answer · answered Aug 22 '14 at 08:17

That's not working because your $(document).ready(... line runs before jQuery loads, and so it fails because either $ is undefined (throwing a ReferenceError) or it refers to something other than jQuery. Also, you're calling jQuery.noConflict() before jQuery is loaded, and if that call did work, it would mean that $ no longer referred to jQuery at all, so $(document).ready(... still wouldn't work.

In any modern browser, you can use the load event on the script element you're adding, which tells you that the script has been loaded. Probably best to pass a callback into a call you make to includejquery.js, like this:

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="includejquery.js"></script>
</head>
<body>
<div id="testing"></div>

<script type="text/javascript">
    includejQuery(function($){
        $('#testing').html('<p>This is a paragraph!</p>');
    });
</script>
</body>
</html>

includejquery.js:

function includejQuery(callback) {
    if(window.jQuery)
    {
        // jQuery is already loaded, set up an asynchronous call
        // to the callback if any
        if (callback)
        {
            setTimeout(function() {
                callback(jQuery);
            }, 0);
        }
    }
    else
    {
        // jQuery not loaded, load it and when it loads call
        // noConflict and the callback (if any).
        var script = document.createElement('script');
        script.onload = function() {
            jQuery.noConflict();
            if (callback) {
                callback(jQuery);
            }
        };
        script.src = "http://code.jquery.com/jquery-2.1.1.min.js";
        document.getElementsByTagName('head')[0].appendChild(script);
    }
}

Changes there:

In includejquery.js, just define a function and wait to be called.
Have that function accept a callback.
Have it wait for the script to load.
When the script is loaded, call jQuery.noConflict and then, if there's a callback, call it and pass in the jQuery function.
In the HTML, I'm calling the function, and receiving the argument it passes me as $, so within that function only, $ === jQuery even though outside it, it doesn't (because of noConflict).

score 3 · Answer 2 · answered Aug 22 '14 at 08:17

What's wrong with the implementation from the HTML5-Boilerplate?

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery_2.1.1.min.js"><\/script>')</script>

score 2 · Answer 3 · answered Mar 15 '17 at 18:54

Alternative solution

(function () {

        initScript().then(function (v) {
            console.info(v);
            var script = document.getElementById("__jquery");
            script.onload = function () {
                $(document).ready(function () {
                    // Main logic goes here.
                    $("body").css("background-color","gray");
                });
            };
        });

        function initScript() {
            promise = new Promise(function(resolve,reject) {
                try {
                    if(typeof jQuery == 'undefined') {
                        console.warn("jQuery doesn't exists");
                        var jQuery_script = document.createElement("script");
                        jQuery_script.src = "https://code.jquery.com/jquery-2.2.4.min.js";
                        jQuery_script.type = 'text/javascript';
                        jQuery_script.id = "__jquery";
                        document.head.appendChild(jQuery_script);
                        resolve("jQuery added succesfully.");
                    }
                    resolve("jQuery exists.")
                } catch (ex) {
                    reject("Something went wrong on initScript() : ", ex);
                }
            });
            return promise;
        }

    })();

I used promise because if there is no jQuery in the page we need to wait to load it first.

score 0 · Answer 4 · answered Aug 22 '14 at 08:16

0

.ready will not fire since your script loads async.

This should the first thing to run on the page and block all other scripts in order to load the dependencies on time.

answered Aug 22 '14 at 08:16

raam86

6,785
2
31
46

score 0 · Answer 5 · answered Aug 22 '14 at 08:18

Appending to body:

function loadScript() {
   var script= document.createElement('script');
   script.type= 'text/javascript';
   script.src= 'http://www.mydomain/myscript.js';
   script.async = true;
   document.body.appendChild(script);
}

Appending to head:

function loadScript() {
   var head= document.getElementsByTagName('head')[0];
   var script= document.createElement('script');
   script.type= 'text/javascript';
   script.src= 'http://www.mydomain/myscript.js';
   script.async = true;
   head.appendChild(script);
}

score 0 · Answer 6 · answered Aug 22 '14 at 08:21

0

Usually when you include some scripts, browser will load them synchronously, step by step.

But if you set

script.async = true;

script will load asynchronously and other scripts will not waiting for them. To fix this problem you can remove this option.

answered Aug 22 '14 at 08:21

Farkhat Mikhalko

3,565
3
23
37

score 0 · Answer 7 · answered Aug 22 '14 at 08:21

There is an onload event on the script. Use that.

  <!doctype html>
    <html>
    <head>
        <script type="text/javascript">
            window.onload = function() {
                var script = document.createElement('script');
                script.type = "text/javascript";
                script.src = "http://code.jquery.com/jquery-2.1.1.min.js";
                document.getElementsByTagName('head')[0].appendChild(script);

                script.onload = function() {
                    $('#testing').html('<p>This is a paragraph!</p>');
                }; 

            }; 
        </script>
    </head>
    <body>
    <div id="testing"></div>

    </body>
    </html>

score 0 · Answer 8 · answered Aug 22 '14 at 08:23

Check your browsers js console. You will probably see something like $ is undefined and not a function. It is because you are running the code in

You can try to wrap the jquery code you want to run in the readyStateChange event of the script tag. Or you can use require.js.

score 0 · Answer 9 · answered Aug 22 '14 at 08:25

There is a working demo http://jsbin.com/lepapu/2/edit (Click "Run with JS")

<script>
if(!window.jQuery)
{document.write('<script src=http://code.jquery.com/jquery-2.1.1.min.js><\/script>')}
</script>

<script>
$(document).ready(function(){
    $('body').html('<p>This is a paragraph!</p>');
});
</script>

The order of scripts matters.

How to include jQuery dynamically in any website using pure javascript

9 Answers9

Linked

Related