How to Use Multiple jQuery Versions on Same Page

jQuery is a popular third party JavaScript library that is used by many websites and organizations all over the world. Generally, people use only a single jQuery version on their web pages. But in some cases, you may need to use multiple jQuery versions on a single page. If you directly include multiple jQuery versions as separate script tags, you may get JavaScript conflicts and errors on your page. In this article, we will learn how to use multiple jQuery versions on same page.

How to Use Multiple jQuery Versions on Same Page

For example, you may be required to upgrade to a newer version of jQuery to use some of the latest features not available in the present jQuery version used on your website. But doing so may break some of the jQuery code on your website. There may be certain functions and code snippets that are supported by older versions of jQuery but not the newer versions. In such cases, you will need to retain both versions of jQuery on your web pages.

You can do this using noconflict mode supported by jQuery. Let us say you want to use two jQuery versions 1.1.2 and 1.9.1. Here is how you need to include them on your web page.

<!-- load jQuery 1.1.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.2.js"></script>
<script type="text/javascript">
var jQuery_1_1_2 = $.noConflict(true);
</script>

<!-- load jQuery 1.9.1 -->
<script type="text/javascript" src="http://example.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var jQuery_1_9_1 = $.noConflict(true);
</script>

After including the jQuery library’s file you need to immediately call $.noConflict(true) and assign the library version to a separate variable. This variable is used as an identifier to call any function from the correct version.

You will notice that we have defined two jQuery variables jQuery_1_1_2 and jQuery_1_9_1. They are meant to differentiate the functions available in each version. So instead of using $(‘#selector’).function(); you need to do jQuery_1_1_2(‘#selector’).function(); to call the function from version 1.1.2 or jQuery_1_9_2(‘#selector’).function(); if you want to call the function present in version 1.9.2.

This will ensure that there is no conflict in case the same function is present in both jQuery versions.

In this article, we have learnt how to use multiple jQuery versions on same page. The key is to assign $.noConflict(true) to different variables so that there is not conflict.

Also read:

How to Convert Form Data to JS Object in jQuery
How to Detect Mobile Device Using jQuery
How to Bind Event to Dynamic Elements in jQuery
How to Find Sum of Array of Numbers in JavaScript
Remove Unicode Characters from String

Sreeram Sreenivasan

Sreeram has more than 10 years of experience in web development, Python, Linux, SQL and database programming.