I was in New York recently teaching my ASP.NET Web Forms class while one of my colleagues was teaching my jQuery class a couple of doors away. One of the students in the jQuery class asked an interesting question, and since another instructor – Randy Casburn – was sitting in the back of the room, he had some fun playing around with alternative answers. I thought the code he came up with might be useful to someone, so I’m posting it here – along with two other answers to the question: ranging from the officially recommended (but restrictive) to the deeply unofficial (but clever and very flexible).
Why might you want to do have multiple versions? There are all sorts of reasons:
- You may be using a plugin that relies on an older version
- As a developer, you may not have control over the whole page – just your portion of it – and other developers/teams may be adding their versions of jQuery elsewhere on the page. (This is particularly true if you have a complex server side set up, and your pages are built from different elements maintained by different developers/teams).
- You may use a third party tool that relies on a particular version
- A component may inject an older version of jQuery whether you want it to or not.
So – first, what are the official answers to the question?
Answer one: don’t do it, use the migration plugin.
The idea here is that you don’t run an older version of jQuery as well as a newer version, you use the migrate plugin to add backwards compatibility to your newer version (1.9+). First replace your old version of jQuery with the new one, then add a reference to the migrate plugin. As if by magic, the deprecated elements removed in the more recent version are restored and your existing code works:
<script src=”http://code.jquery.com/jquery-1.10.2.js”></script>
<script src=”http://code.jquery.com/jquery-migrate-1.2.1.js”></script>
Advantages: you only have one version of jQuery, and the plugin provides a migration path until you get around to updating.
Disadvantages: it only goes back as far as jQuery 1.6.4, so if you need to support an older version, it doesn’t help.
Answer two: use .noConflict()
The noConflict() method is designed to relinquish jQuery’s use of the $ alias so that jQuery can work alongside other JavaScript libraries. It works just as well when that ‘other’ library is an older version of jQuery, even if the jQuery team does not recommend having more than one version.
The following code….
<script
src=’http://code.jquery.com/jquery-1.6.min.js’></script>
<script
src=’http://code.jquery.com/jquery-1.7.2.min.js’></script>
<script>
jQuery.noConflict();
/**
Newer version code would be here
Note: use of ‘on()’ method
**/
jQuery(function(){
jQuery(‘#new’).on(‘click’, function(e){
e.preventDefault();
jQuery(‘body’).append(‘You clicked on the “jQuery” link. It used version: ‘+jQuery.fn.jquery+‘<br/><br/>’);
});
});
/**
Legacy code would be here
Note: use of ‘bind()’ method
**/
$(function(){
$(‘#old’).bind(‘click’, function(e){
e.preventDefault();
$(‘body’).append(‘You clicked on the “$” link. It used version: ‘+$.fn.jquery+‘<br/><br/>’);
});
});
</script>
</head>
<body>
<a
id=’old’
href=’#’>Execute older version (jQuery as $)</a>
<br/><br/>
<a
id=’new’
href=’#’>Execute newer version (jQuery as jQuery)</a>
<br/>
</body>
Leads to the following output when both buttons have been clicked:
That’s nice if you need to support two versions of jQuery, one of which is older than 1.6.4. But what if you have a situation where you absolutely have to use more than two versions of jQuery side by side? Here is Randy’s solution:
Answer three: Alias, alias, alias
The solution here is to add the version of jQuery you want to use and assign it to a variable. Then add another version, and assign it to another variable. Repeat as necessary.
Here’s the code:
<script
src=’http://code.jquery.com/jquery-1.3.pack.js’></script>
<script>
var $$$ = jQuery;
</script>
<script
src=’http://code.jquery.com/jquery-2.0.3.min.js’></script>
<script>
var $$ = jQuery;
</script>
<script
src=’http://code.jquery.com/jquery-1.6.min.js’></script>
<script
src=’http://code.jquery.com/jquery-1.7.2.min.js’></script>
<script>
jQuery.noConflict();
$$$(function(){
$$$(‘body’).append(‘/————-/<br>$$$ is version: ‘+$$$.fn.jquery);
$$$(‘body’).append(‘<p>’ + testOnSupport($$$) + ‘</p>’);
});
$$(function(){
$$(‘body’).append(‘/————-/<br>$$ is version: ‘+$$.fn.jquery);
$$(‘body’).append(‘<p>’ + testOnSupport($$) + ‘</p>’);
});
jQuery(function(){
jQuery(‘body’).append(‘/————-/<br>jQuery is version: ‘+jQuery.fn.jquery);
jQuery(‘body’).append(‘<p>’ + testOnSupport(jQuery) + ‘</p>’);
});
$(function(){
$(‘body’).append(‘/————-/<br>$ is version: ‘+$.fn.jquery);
$(‘body’).append(‘<p>’ + testOnSupport($) + ‘</p>’);
$(‘body’).append(‘/————-/<br>’);
});
function testOnSupport(x)
{
if (typeof (x(‘body’).on) == ‘undefined’) nope = ‘Does not support on()’; else nope = ‘Does support on()’;
return nope;
}
</script>
</head>
<body>
<br>
</body>
And here’s what the output looks like:
Do I recommend having multiple versions of jQuery side by side? Emphatically not. But if you have no choice in the matter, there are a surprising number of ways to get there. Whichever you use, do be careful of the order in which you add your references – if you’re using .noConflict() for example, you need to make sure you put your script files and the .noConflict() code AFTER any older version of jQuery injected by a component.
For other related information, check out this course from Learning Tree:
Perspectives on .NET Programming From Learning Tree International 