How do I run different versions of jQuery on the same page?

My company has purchased a product that renders an ASP.NET control on the page. This control uses jQuery 1.2.3 and adds a script tag to the page to reference it. The developers of the control will not support use of the control if it modified in any way (including modification to reference a different version of jQuery).

I'm about to start development of my own control and would like to use the features and speed improvements of jQuery 1.3. Both of these controls will need to exist on the same page.

How can I allow the purchased control to use jQuery 1.2.3 and new custom development to use jQuery 1.3? Also out of curiosity, what if we were to use an additional control that needed to reference yet another version of jQuery?

Solution 1:

You can achieve this by running your version of jQuery in no-conflict mode. "No conflict" mode is the typical solution to get jQuery working on a page with other frameworks like prototype, and can be also be used here as it essentially namespaces each version of jQuery which you load.

<script src="jQuery1.3.js"></script>
<script>
    jq13 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

This change will mean that any of the jQuery stuff you want to use will need to be called using jq13 rather than $, e.g.

jq13("#id").hide();

It's not an ideal situation to have the two versions running on the same page, but if you've no alternative, then the above method should allow you to use two differing versions at once.

Also out of curiosity, what if we were to use an additional control that needed to reference yet another version of jQuery?

If you needed to add another version of jQuery, you could expand on the above:

<script src="jQuery1.3.js"></script>
<script>
    jq13 = jQuery.noConflict(true);
</script>
<script src="jQuery1.3.1.js"></script>
<script>
    jq131 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

The variables jq13 and jq131 would each be used for the version-specific features you require.

It's important that the jQuery used by the original developer is loaded last - the original developer likely wrote their code under the assumption that $() would be using their jQuery version. If you load another version after theirs, the $ will be "grabbed" by the last version you load, which would mean the original developer's code running on the latest library version, rendering the noConflicts somewhat redundant!

Solution 2:

As said ConroyP you can do this with jQuery.noConflict but don't forget var when declaring variable. Like this.

<script src="jQuery1.3.js"></script>
<script>
    var jq13 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

You can connect all $'s to jq13 by adding (jq13) after function's }). like this

(function($) {
 ... 
})(jq13);

Solution 3:

It seems like the order doesn't matter... for example: http://gist.github.com/136686. The console output is at the top and all the versions seem to be in the right places.