$(document).ready() when jQuery is loaded as a dynamically appended <script>

Question

For reasons that are beyond my control I have to load jQuery via a dynamically appended <script> tag, and only do this upon some arbitrary event, not at page load.

My problem is in detecting the moment when jquery is ready, for the code below doesn't work:

(function(){
    var s=document.createElement('script');
    s.setAttribute('type','text/javascript');
    s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
    document.getElementsByTagName('head')[0].appendChild(s);
})()

$(document).ready(function() {
  // something that uses jquery and currently doesn't work
});

How do I detect the moment when jquery is ready to be used in this particular configuration?

Thanks in advance

Possible duplicate. Go check these questions: - stackoverflow.com/questions/3032721/… - stackoverflow.com/questions/4249030/… — Julio Santos
– Julio Santos, Commented Jan 24, 2011 at 14:23

jAndy · Accepted Answer · 2011-01-24 14:26:39Z

2

Use the onload and onreadystatechange event handlers:

var scr   = document.createElement('script'),
    head      = document.getElementsByTagName('head')[0];

scr.onload = scr.onreadystatechange = function(){
        if( scr.readyState ){
            if(scr.readyState === 'complete' || scr.readyState === 'loaded'){
                scr.onreadystatechange = null;                                                  
                myReadyFunc();
            }
        } 
        else{                               
                myReadyFunc();          
        }
};  

head.insertBefore(scr, head.firstChild);

function myReadyFunc() {
    $(document).ready(function() {
      // something that uses jquery and currently doesn't work
    });
}

answered Jan 24, 2011 at 14:26

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

Comments

The_Butcher · Accepted Answer · 2011-01-24 14:23:47Z

1

An old-school answer :) You can create a recursive polling function that check to see if the $ object exists eg:

function poller(){
    if($.length != 0){
       //do what you want

    }else{
       setTimeout(poller, 100);
    }    
}

And right after you load the jQuery script run the poller function.

answered Jan 24, 2011 at 14:23

The_Butcher

2,4982 gold badges27 silver badges38 bronze badges

Comments

SLaks · Accepted Answer · 2011-01-24 14:34:38Z

1

You can handle the <script> element's onreadystatechange event, and, if this.readyState is complete or loaded, run your function.
For Firefox, handle the onload event.

You can expose this in a wrapper function which takes a function as a parameter, and calls it if jQuery has been loaded, or puts it in an array (to call in the load handler) if it's not loaded.

edited Jan 24, 2011 at 14:34

answered Jan 24, 2011 at 14:22

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Collectives™ on Stack Overflow

$(document).ready() when jQuery is loaded as a dynamically appended <script>

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related