Adding jQuery by demand and use $?

Question

I have a TextBox and a Button:

If the value inside the Textbox is 1 (just emulating a condition)) I need to load jQuery on the fly and use a document Ready function :

I tried this :

function work() //when button click
{
        if (document.getElementById('tb').value == '1')
        {
                if (typeof jQuery == 'undefined')
                {
                        var script = document.createElement('script');
                        script.src = "http://code.jquery.com/jquery-git2.js";
                        document.getElementsByTagName('head')[0].appendChild(script);
                        $(document).ready(function ()
                        {
                                alert('');
                        });
                }
        }
}

But it says :

Uncaught ReferenceError: $ is not defined

I assume it's because the line : $(document).ready(function ()....

But I don't understand why there is a problem , since i'm, loading jQuery BEFORE I use $...

Question :

How can I fix my code to work as desired ?

JSBIN

Answer 1

You are missing the script onload handler:

var script = document.createElement('script');
// do something with script
// onload handler
script.onload = function () {
     // script was loaded, you can use it!    
};

Your function becomes:

function work() {

    if (document.getElementById('tb').value != '1') { return; }
    if (typeof jQuery != 'undefined') { return; }

    // jQuery is undefined, we will load it
    var script = document.createElement('script');
    script.src = "http://code.jquery.com/jquery-git2.js";
    document.getElementsByTagName('head')[0].appendChild(script);

    // load handler
    script.onload = function () {
        // jQuery was just loaded!
        $(document).ready(function () {
            alert('');
        });
    };
}

Also, do not forget script.onreadystatechange for IE compatibility.

script.onreadystatechange = function () {
    if (script.readyState === 'loaded' || script.readyState === 'complete') {
        // script was loaded 
    }
}

Also seems that YepNope would be a good option, too.

JSBIN DEMO

Answer 2

Using YepNope would probably a good option in this case.

yepnope([
    {
        test: window.jQuery,
        nope: 'path/url-to-jquery.js',
        complete: function() {
            $(document).ready(function() {
                //whatever you need jquery for
            });
        }
    }
]);

You can just put that in the head of your document, and it will only load jquery if window.jQuery isn't defined. It's much more reliable (and simpler) than script.onload or script.onreadystatechange. the callback complete will only be called once jquery is loaded, so you can be sure that $ will be defined at that point.

Note: if you're using Modernizr.js on your site, there's a good chance yepnope is already bundled into that script.