load jQuery in another js file

Question

I have a JavaScript file, which also uses jQuery in it too. To load it, I wrote this code:

function include(filename)
{
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';
    head.appendChild(script)
}

include('http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js');
alert("1");

$(document).read(function(){});
alert("2");

This fires alert("1"), but the second alert doesn't work. When I inspect elements, I see an error which says that $ in not defined.

How should I solve this problem?

Helpful link: sitepoint.com/dynamically-load-jquery-library-javascript — raksheetbhat
– raksheetbhat, Commented Mar 11, 2019 at 12:36

Darin Dimitrov · Accepted Answer · 2011-11-15 16:45:51Z

24

You need to execute any jQuery specific code only once the script is loaded which obviously might happen at a much later point in time after appending it to the head section:

function include(filename, onload) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';
    script.onload = script.onreadystatechange = function() {
        if (script.readyState) {
            if (script.readyState === 'complete' || script.readyState === 'loaded') {
                script.onreadystatechange = null;                                                  
                onload();
            }
        } 
        else {
            onload();          
        }
    };
    head.appendChild(script);
}

include('http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js', function() {
    $(document).ready(function() {
        alert('the DOM is ready');
    });
});

And here's a live demo.

You may also take a look at script loaders such as yepnope or RequireJS which make this task easier.

answered Nov 15, 2011 at 16:45

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Mior Over a year ago

+1 for a detailed answer without immediately resorting to a script loader (which is probably what I would have done :)

Leo · Accepted Answer · 2011-11-15 16:40:56Z

-1

The problem here is probably that, even though you include the script, it doesn't mean it is loaded when you try to do $(document).ready(function(){});. You could look into Google Loader to prevent this problem http://code.google.com/intl/fr-FR/apis/loader/

answered Nov 15, 2011 at 16:40

Leo

5,3562 gold badges22 silver badges28 bronze badges

Collectives™ on Stack Overflow

load jQuery in another js file

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related