Do something when the jQuery plugin loads

Question

I am loading jQuery and jQuery UI dynamically into a page, and I need to know when jQuery UI successfully expanded jQuery .

I am currently using the readystate script element that loads the jQuery UI to start running my code, but I think the script was loading at that moment, but the jQuery UI not initialized correctly.

Is the only choice to poll until $.ui is defined?

Here is the code I'm struggling with right now:

 (load_ui = (callback) -> script2 = document.createElement("script") script2.type = "text/javascript" script2.src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js" script2.onload = script2.onreadystatechange = -> console.log 'readystate:', @readystate if @readystate == "loaded" or @readystate == "complete" console.log "jquery ui is loaded" callback ($ = window.jQuery).noConflict(1), done = 1 $(script,script2).remove() document.documentElement.childNodes[0].appendChild script2 console.log 'jquery ui script element appended to page' (window, document, req_version, callback, $, script, done, readystate) -> if not ($ = window.jQuery) or req_version > $.fn.jquery or callback($) console.log "begin loading jquery" script = document.createElement("script") script.type = "text/javascript" script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + req_version + "/jquery.min.js" script.onload = script.onreadystatechange = -> if not done and (not (readystate = @readyState) or readystate == "loaded" or readystate == "complete") console.log "jquery is loaded, now loading jquery ui" load_ui(callback) document.documentElement.childNodes[0].appendChild script console.log 'jquery script element appended to page' ) window, document, "1.6.1", ($, L) -> console.log $ console.log $.ui.version 

For some reason, the readistate of the jquery ui script element returns undefined.

Answer 1

I think this will do exactly what you need, add as many dependencies as you like.

 (function () { function getScript(url, success) { var script = document.createElement('script'); script.src = url; var head = document.getElementsByTagName('head')[0]; var completed = false; script.onload = script.onreadystatechange = function () { if (!completed && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) { completed = true; success(); script.onload = script.onreadystatechange = null; head.removeChild(script); } }; head.appendChild(script); } getScript("Scripts/jquery-1.6.1.js", function () { getScript("Scripts/jquery-ui-1.8.11.js", function () { alert($.ui); }); }); })(); 

Tested with IE7, IE8, IE9, Firefox, Safari, Chrome and Opera

Answer 2

 <script src="jquery ui"></script> <!-- jQuery UI has been initialized --> <script src="my source"></script> 

Answer 3

I used this code for some projects to ensure that some scripts are executed sequentially. It did not work on IE (and I did not have time to debug), but it worked fine for everything else.

 var node = document.createElement("script"); $.extend(node, { type: 'text/javascript', charset: 'utf-8', async: false, defer: true, src: /*...*/ }); $(node).bind('load', loadedCallback); $('head')[0].appendChild(node);