bookmarklet - loading jquery and jquery UI if not loaded, checking a minimum version and in the right order

Question

Im creating a bookmarklet that requires jquery and jquery ui and am having trouble getting a robust/flexible version working (have trawled S.O and various blogs) but they either seem to only check one file is loaded (e.g. jQuery) or just load jQuery and other files in order without checking if they are loaded first.

I really like this one:

(function(){

    // the minimum version of jQuery we want
    var v = "1.8.2";

    // check prior inclusion and version
    if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
        var done = false;
        var script = document.createElement("script");
        script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js";
        script.onload = script.onreadystatechange = function(){
            if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
                done = true;
                initMyBookmarklet();
            }
        };
        document.getElementsByTagName("head")[0].appendChild(script);
    } else {
        initMyBookmarklet();
    }

    function initMyBookmarklet() {
        (window.myBookmarklet = function() {
            $('body').append('hello world');
        })();
    }

})();

Which sets a minimum version for jQuery and only loads if needed. But how do I wrap this up with jQuery UI as well? e.g. setting a min version and only loading it if needed AND making sure they load in the correct order.

Any pointers would be greatly appreciated,

The code you have provided shows you how to do what you want. The example appends a script file and the onload event executes a function. So you just nest the code deeper. After loading jquery the onload function appends jqueryui and the onload event for *that* script executes the final fuction. Or if you want to append a 3rd script or CSS file, etc, you just add further links in the chain. — DG., Mar 15 '13 at 14:13

score 0 · Answer 1 · answered Mar 16 '13 at 11:07

You are on the right track ... just check again for jquery ui after loading jquery

(function(){
    var addScript = function (path, callback) {
        var done = false;
        var script = document.createElement("script");
        script.src = path;
        script.onload = script.onreadystatechange = function(){
            if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
                done = true;
                if (callback) {
                    callback ();
                }
            }
        };
        document.getElementsByTagName("head")[0].appendChild(script);
    };

    var initMyBookmarklet = function () {
        (window.myBookmarklet = function() {
            $('body').append('hello world');
        })();
    }

    var checkForJQueryUI = function () {
        if (condition for jquery ui) {
            addScript("http://jquery-ui-path-goes-here/file.js", initMyBookmarklet);
        } else {
            initMyBookmarklet();
        }
    };

    var checkForJQuery = function () {
        // the minimum version of jQuery we want
        var v = "1.8.2";
        // check prior inclusion and version
        if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
            addScript("http://ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js", checkForJQueryUI);
        } else {
            checkForJQueryUI();
        }
    };

    checkForJQuery();
})();

bookmarklet - loading jquery and jquery UI if not loaded, checking a minimum version and in the right order

1 Answers1