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

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="https://stackoverflow.com/questions/528241/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="https://stackoverflow.com/questions/528241/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!

Leave a Comment