stebbin45
stebbin45

Reputation: 119

How to do a success callback when loading JS includes from another script file

I have legacy web app situation where I can't load jquery.min.js from a script tag in the HTML markup.. so I have to load it with some js in another existing script file

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
script.type = 'text/javascript';
head.appendChild(script);

The problem is.. when the include load is slow.. there are jQuery functions (also dynamically loaded on the page) that try to run and can't find jQuery

Is there some cross-browser way to do a callback in the above code that calls the jQuery ready function after the jquery.min.js include file finishes downloading from the CDN? Thanks,

EDIT:

Using Mike's code this is working with onload for nearly all browsers except IE 8 or earlier.. and other browsers which need onreadystatechange I guess

JSFIDDLE HERE:

http://jsfiddle.net/BmyGC/

Upvotes: 2

Views: 1063

Answers (2)

Mike
Mike

Reputation: 1042

try

if(script.onreadystatechange)
  script.onreadystatechange = function()
  {
      if(script.readyState == "complete"  || script.readyState=="loaded")
   {
   script.onreadystatechange = false;
       console.log("complete");
   }
  }
 else
 {
    script.onload = function()
    {
        console.log("complete");
    }
 }

Upvotes: 3

Jake Feasel
Jake Feasel

Reputation: 16945

I would put my jquery-based code in yet another separate javascript file, and load that file in exactly the same way you are loading the jquery.min.js. Just do so immediately after jquery.min.js. That should work.

edit

Okay, since that isn't working, try this:

function jqChecker()
{
  if (! jQuery )
  {
    setTimeout(jqChecker, 500); // adjust as needed.
  }
  else
  {
   // insert code to dynamically load your external js file here
  }
}
jqChecker();

Upvotes: 0

Related Questions