Running Multiple Version of jQuery on the Same Page.

By October 28, 2014 Blog No Comments

The first question you may ask yourself is why on earth would I need to run multiple jQuery versions on the same page. It’s quite rare that you will need to, but a common in case is if you are trying to update legacy code to a newer version of jQuery and are worrying about breakage in your code. By running two different version of jQuery we can upgrade slowly and port our code into a new version of jQuery while not worrying about potentially breaking old code.

The great thing is that jQuery already comes packaged with a method for this called $.noConflict(). Generally this method is used in case you have two separate libraries altogether and both use $ as an entry point to the library. But if we want to load two separate versions of jQuery we can just do something like this:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/jquery-1.6.2.js"></script>
jq162 = jQuery.noConflict(true);

In this case we could then use the aliases $ and jq162 to make calls to the library. For instance $('#element) and jq162('#element').

However having a bunch of aliases can also be a bit confusing and having the $ alias is usually preferable. The easy way around this is to wrap your code in a namespace and pass in the jQuery object into a function. Don’t forget the $.noConflict() call at the top.

jQuery.noConflict();
(function($) {
  var $el = $('#element);
})(jQuery);

This way even if the $ alias get’s overwritten it will still be the same $ within that scope.