Craig McCoy

Programmer / Developer & Zombie Survivalist

How to use two versions of JQuery at the same time

Jan/2012 26

It isn't usually a great idea to run two versions of JQuery on the same site. Sometimes, it might be necessary. Drupal is a good example of this, even with the JQuery update module, core needs a much older version of JQuery than what the latest stable release may be.

Multiple versions of JQuery can be run using jQuery.noConflict(). When a second version of jQuery is loaded, the object contains a reference to the first version, so that noConflict can be used. (this is a namespacing thing for the object, it would also work with a different library that used the same namespace).

Try the demo out below to see it in action.

Demo
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script type="text/javascript"> 
 var $old = $.noConflict();
</script>

<script type="text/javascript">
	$(document).ready(function ($) {
		//initilize any plugins that need the newer version of jquery 
		alert($().jquery);
	});
	
	$old(document).ready(function ($) {
		//initilize any plugins that need the older version of jquery 
		alert($().jquery);
	});
</script>