Loading And Executing jQuery In Javascript File

Question

My question is similar to this one. But I feel the answers there are incomplete and the question ended with a not of uncertainty...

I am developing a Javascript application for my users to put on their site. I only want them to have to put ONE javascript include at the top of their webpage in order to use my application.

My javascript needs jQuery to run.

So the goal is to...

Check if jQuery is already loaded.
Load jQuery if it has not been loaded.
Execute javascript that needs jQuery to run.

I want to do the above three all within the same script.

Here is what I tried originally...

function loa_j(){
 if (typeof jQuery === "undefined") {
 var newscript = document.createElement('script');
 newscript.type = 'text/javascript';
 newscript.async = true;
 newscript.src = 'http://code.jquery.com/jquery-latest.min.js';
 (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
 }
}

loa_j();
$(document).ready(function(){
//...Code That Never Fired
}

This does not work because javascript does not wait for jQuery to load. It does load the jQuery, just not fast enough.

Here is my other solution, this one worked, but I am scratching my head wondering whether or not this is really the best way to do this...

function loa_j(){
if (typeof jQuery === "undefined") {
(function(a,b){function G(a){var b=F[a]={.... //Entire jQuery copy and pasted in :D
}
}

So by copying and pasting the entire jQuery into that function, the code actually does work.

Is this really the best way to do this?

Not exactly sure what you mean...I would prefer for my users not to have to edit too much html though :) — kmoney12, Sep 25 '12 at 06:13
Event `onload` in HTML using as indicator, whish show what page fully loading (with styles, external scripts, images). `onload="loa_j()` mean what script `loa_j()` is necessary to run AFTER page has been loaded. — doktorgradus, Sep 25 '12 at 06:19

score 1 · Answer 1 · answered Sep 25 '12 at 07:52

you can add onload event to the dynamically loaded script as follows:

function loa_j(){
 if (typeof jQuery === "undefined") {
     var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = true;
     newscript.src = 'http://code.jquery.com/jquery-latest.min.js';
     newscript.onload = jqReady;  //<-- executed only after jquery is loaded
     (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body'[0]).appendChild(newscript);
  }
}

function jqReady(){
    // your jquery code here 
}

loa_j();

score 0 · Answer 2 · answered Sep 25 '12 at 06:13

0

Edit like this

$(document).ready(function(){
loa_j();
//...Code That Never Fired
}

answered Sep 25 '12 at 06:13

GautamD31

28,552
10
64
85

I will try...but I don't think this will work? I believe the $(document).ready depends on jQuery (which is why it doesn't work in my first snippet). – kmoney12 Sep 25 '12 at 06:14
Just check it friend,i think it will woks because the function call should be done after the "ready()" – GautamD31 Sep 25 '12 at 06:15
Tried it...did not work. loa_j() is the thing that loads jQuery. I can't use any jQuery before it is executed. – kmoney12 Sep 25 '12 at 06:18
But i think after loading the jqueryonly then it can check right..? – GautamD31 Sep 25 '12 at 06:21

score 0 · Answer 3 · answered Sep 25 '12 at 06:18

In this instance, you have to use a timer to check for the existence of the library, then execute your code. See this fiddle:

http://jsfiddle.net/pFaJc/

var callback = function(){
    $(document).ready(function(){
         console.log('jquery');
    });        
}

if( typeof jQuery === 'undefined' ){
    var scr = document.createElement('script');
    scr.src = 'http://code.jquery.com/jquery-latest.min.js';
    document.getElementsByTagName('head')[0].appendChild(scr);

    var timer = setInterval(function(){
        if( typeof jQuery !== 'undefined' ){
            clearInterval(timer);
            callback();
        }        
    },100);
}

score 0 · Answer 4 · answered Sep 25 '12 at 06:56

You can try this, it basically waits for the jquery to load, then executes the function. Its also a good Idea to probably load Jquery statically, if you can, since it seems that you do rely on the $(document).ready function. But if thats not possible, you can try this, or any other loaders out there like yepnope.js or my favorite requirejs.

http://jsfiddle.net/ytZRw/

Loading And Executing jQuery In Javascript File

4 Answers4