I need to update jQuery version for a Bookmarklet

Question

Hi, I'm creating a bookmarklet and everything was going ok. I had a function that loads jQuery asynchronous if the page didn't have it and then load my script or load my script directly if the page had jQuery.

Then I try to use the delegate function which is only available in jQuery 1.4.something. I can check the jQuery version with $().jquery but then if i load jQuery i have jQuery twice and events executes twice.

Is there a way to remove the previous loaded jQuery and then load the new version that I need?

Answer 1

There is, but you'll be breaking the page when you do so, so I highly recommend not doing this. To remove jQuery itself:

 jQuery.noConflict(true);

This is just to show it can be done (though it doesn't remove all the effects it had), in your case I would not do this, what you're doing will really break the webpage your bookmarklet's running on.

Instead, consider if your bookmarklet needs the latest jQuery API, would a version behind fit all your needs? If so then use that, even if it's a bit less efficient, so it works whether the page has a slightly older version or not.

Answer 2

It is possible to move jQuery to another namespace.

//Completely move jQuery to a new namespace in another object.
var dom = {};
dom.query = jQuery.noConflict(true);

Here is some slightly altered code from another question, the asker was able to get it working for the exact same usage as you, a bookmarklet.

/* I have attempted to change the code to check for the 1.4.x and if its not then  
   load the latest version of jQUery.  */ 
    (function(){

        var myBkl = {
                 jq: null,
                 loadScript: function(src) {
                        if(window.jQuery && window.jQuery.fn.jquery.indexOf('1.4') >= 0){
                                return;
                        }
                        var s = document.createElement('script');
                        s.setAttribute('src', src);
                        s.setAttribute('type', 'text/javascript');
                        document.getElementsByTagName('head')[0].appendChild(s); 
                },
                whenLoaded: function(callback){
                        if (typeof(window.jQuery) !== 'undefined' && window.jQuery.fn.jquery.indexOf('1.4') >= 0) { 
                                myBkl.jq = window.jQuery.noConflict(true);
                                callback(myBkl.jq); 
                        } 
                        else {
                                setTimeout((function() {myBkl.whenLoaded(callback); }), 100);
                        } 
                },
                init: function($){
                        console.log($.fn.jquery);
                        console.log(window.jQuery.fn.jquery);
                }
        };
        myBkl.loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'); //this will load the latest version from google cdn
        myBkl.whenLoaded(myBkl.init);

})();

Original Source Reference: http://stackoverflow.com/questions/613808/is-it-possible-to-load-multiple-different-version-of-jquery-on-the-same-page

The other option for you if you must do this, (after finding that you can't rewrite your bookmarklet without .delgate() as others have suggested) it is possible to have multiple versions of jQuery on the same page. look below:

if (typeof jQuery == ‘undefined’) {
    appendLatestJQuery();
}
else {
    jQVersion = $().jquery;
    versionArray = jQVersion.split(‘.’);
    if (versionArray[1] < 4) {
        appendLatestJQuery();
    }
    else {
        runthis();
    }
}

function appendLatestJQuery() {
    var jQ = document.createElement('script');
    jQ.type = 'text/javascript';
    jQ.onload=runthis;
    jQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
    document.body.appendChild(jQ);
}
function runthis() {
    var $j = jQuery.noConflict(true);

    //now use $j for your code here

}