Using multiple versions of jQuery on same page

This example shows how you can use multiple versions of jQuery on the same page. It’s simple and very easy to use multiple versions using jQuery.noConflict(true). This jQuery.noConflict(true) was introduced in jQuery version 1.1.

There are various reasons behind using the multiple versions of jQuery. Some reasons are given below:

You have already used a particular version of jQuery and you don’t want to replace the old version and want to additionally use the new version of jQuery to get all new features

you don’t want to replace the old version because the new version is not compatible for certain functionality as old one

You don’t have template for your web pages and if you want to replace the old version then you may not guess on how many pages you need to replace etc.

Suppose you want to use jQuery version 1.3.2 and 1.11.1 on the same web page then you need to include the jQuery in <head/> section as follows:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script> var $jq132 = jQuery.noConflict( true ); </script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> var $jq1111 = jQuery.noConflict( true ); </script>

In the above example, you see that I have declared variable for each version of jQuery and wherever you want to use a particular version of jQuery then you can use the variable instead of $ or jQuery.

Usage Example

The following code shows how to use the variables for jQuery:

<script type="text/javascript">       
    $jq132(document).ready(function() {
        console.log($jq132().jquery); // This prints v1.3.2 in console
        $jq132("div#jQuery132").css("color","pink"); // Change text color
    });

    $jq1111(document).ready(function() {
        console.log($jq1111().jquery); // This prints v1.11.1 in console
        $jq1111("div#jQuery1111").css("color","violet"); // Change text color
    });
</script>

The above example is very easy to understand. The see the console output you need to use Firebug tool in Firefox or Chrome Developer tool in Chrome or IE Developer tool in IE browsers.

The Complete Example

Here is the complete example given on an HTML page.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Use Multiple Versions of jQuery on the Same Page</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script> var $jq132 = jQuery.noConflict( true ); </script>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script> var $jq1111 = jQuery.noConflict( true ); </script>

    <script type="text/javascript">       
        $jq132(document).ready(function() {
            console.log($jq132().jquery); // This prints v1.3.2
            $jq132("div#jQuery132").css("color","pink"); // Change text color
        });

        $jq1111(document).ready(function() {
            console.log($jq1111().jquery); // This prints v1.11.1
            $jq1111("div#jQuery1111").css("color","violet"); // Change text color
        });
    </script>
</head>
<body>
    <div id="jQuery132">Hello, I am jQuery 1.3.2</div>
    <div id="jQuery1111">Hello, I am jQuery 1.11.1</div>
</body>
</html>

Testing the Example

Opening the above HTML document into Chrome browser will give you the following output. You can use any browser to check it.

how to use multiple version of jquery on same page

Source Code

Download

That’s all about how to use multiple versions of jQuery on the same page to meet your different requirements.

Leave a Comment