Using multiple versions of jQuery

Whenever a new version of jQuery comes out, there are several reasons to upgrade; new features, bug fixes and performance are generally the most common. However, it’s not always possible to upgrade as soon as a new version comes out. The new version may contain an API change that would break some of your functionality or you may be using a plugin that isn’t compatible with the new version. This is where jQuery.noConflict() comes in.

History of jQuery.noConflict()

jQuery.noConflict() was added in v1.1 to support loading jQuery on a page with other code that uses the global $ variable. In this version, the only thing that jQuery.noConflict() did was revert the $ variable to what it was before jQuery was loaded. In v1.1.1, this function was modified to also return the jQuery object so that you could assign jQuery to another variable (though it was still also assigned to the global jQuery variable). v1.1.4 introduced a boolean parameter for jQuery.noConflict() to indicate whether the global jQuery variable should be reverted; this option was added to make it easy to load multiple versions of jQuery on the same page.

Using jQuery.noConflict()

Using jQuery.noConflict() to load multiple versions of jQuery is actually pretty simple. There’s essentially just one rule: load your plugins in the correct order. In order for this to work, you have to include one version of jQuery and all of the plugins for that version before including the next version and all of its plugins. You can call jQuery.noConflict() immediately before including the second version or after you have included all the plugins for the second version. Both methods will have the same final outcome, but it may be easier to keep track of what’s going on if you call jQuery.noConflict() immediately before loading the next version in the unlikely event that you need to include more than two versions of jQuery on the same page. Because this method is slightly easier to follow, we’ll use it in our example.

First we need to load both versions of jQuery:

Now we can use either version of jQuery by using the two new variables we’ve created:

jQuery_1_1_3('Use jQuery 1.1.3')
	.click(function() {
		alert('Top: ' + jQuery_1_1_3(this).offset().top + '\n' +
			'jQuery: ' + jQuery_1_1_3.fn.jquery);
	})
	.appendTo('body');

This is great, but you’re probably looking at that code and thinking “I wish I could still use the $ variable.” Well, with a little help from a self-executing anonymous function, you can!

(function($) {
	$('Use jQuery 1.1.3')
		.click(function() {
			alert('Top: ' + $(this).offset().top + '\n' +
				'jQuery: ' + $.fn.jquery);
		})
		.appendTo('body');
})(jQuery_1_1_3);

This is a pattern you’ll see in a lot of plugins (in fact it’s part of what makes this whole thing work). We’ve created a function that accepts a single parameter, $, and we call that function as soon as we define it, passing our jQuery object to it. Now we can reference our jQuery object as $ inside this function. This makes it very easy to rename your global jQuery object while keeping your existing code working with minimal modifications.

View this example in a new window