Do something once jQuery plugin has loaded

Question

I'm dynamically loading jQuery and jQuery UI into a page, and I need to know when jQuery UI has successfully extended jQuery.

At the moment I'm using the readystate of the script element that loads jQuery UI to trigger the running of my code, but I think that at that point, the script has loaded, but jQuery UI hasn't been properly initialised.

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

Here's the code that I'm currently wrestling with:

(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 readystate of the jquery ui script element just returns undefined.

Answer 1

I think this will do exactly what you need, add more dependency as much 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