I need to dynamically load jQuery and jQuery UI from a javascript, then check if it has loaded and do something afterwards.

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file

  var fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", filename);
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", filename);
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref);
}


loadjscssfile("http://localhost/js/jquery-1.3.2.min.js", "js");
loadjscssfile("http://localhost/js/jquery-ui-1.7.2.custom.min.js", "js");

I have done some research and found that I need to either use a callback or a settimeout. Trouble is I'm really new in javascript and it's really giving me a hard time. Can anyone set me in the right direction please?

I need to dynamically load jQuery and jQuery UI from a javascript, then check if it has loaded and do something afterwards.

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file

  var fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", filename);
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", filename);
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref);
}


loadjscssfile("http://localhost/js/jquery-1.3.2.min.js", "js");
loadjscssfile("http://localhost/js/jquery-ui-1.7.2.custom.min.js", "js");

I have done some research and found that I need to either use a callback or a settimeout. Trouble is I'm really new in javascript and it's really giving me a hard time. Can anyone set me in the right direction please?

• javascript
• jquery
• load
• wait

• 1 Dynamically loading javascript files is a reasonably advanced subject for somebody who's new to javascript. Why are you loading these scripts dynamically? – Paul Turner Commented Jan 6, 2010 at 9:28
• 2 why don't you load them the normal way (i.e. by using the plain <script> or <link> tag? – Lukman Commented Jan 6, 2010 at 9:29
• 1 because this javascript file gets called from within a bookmarklet, it has to dynamically create a div inside a site. – Carvefx Commented Jan 6, 2010 at 9:36

2 Answers 2

I've never had to do this myself, but presumably you could just use a repeating timeout to check for presence of the needed objects:

function jqueryLoaded() {
    //do stuff
}

function checkJquery() {
    if (window.jQuery && jQuery.ui) {
        jqueryLoaded();
    } else {
        window.setTimeout(checkJquery, 100);
    }
}

checkJquery();

I'm pretty sure that the window.onload() function should trigger when all scripts are loaded. And you don't need to bind stuff to the 'ready' event in jQuery.

loadjscssfile("http://localhost/js/jquery-1.3.2.min.js", "js");
loadjscssfile("http://localhost/js/jquery-ui-1.7.2.custom.min.js", "js");

window.onload = function() {
    if(window.jQuery && jQuery.ui) {
        alert('loaded');
    }
}