Is it possible to use 2 versions of jQuery on the same page?

Question

NOTE: I know similar questions have already been asked here and here , but I'm looking for additional clarification as to how to make this work or good reasons for avoiding it entirely.

I'm adding functionality to an existing web site that is already using an older version of the jQuery library (1.1.3.1). I've been writing my added functionality against the newest version of the jQuery library (1.4.2). I've tested the website using only the newer version of jQuery and it breaks functionality, so now I'm looking at using both versions on the same page. How is this possible?

What do I need to do in my code to specify that I'm using one version of jQuery instead of another? For example, I'll put <script> tags for both versions of jQuery in the header of my page, but what do I need to do so that I know for sure in my calling code that I'm calling one version of the library or another?

Maybe something like this:

//Put some code here to specify a variable that will be using the newer
//version of jquery:
var $NEW = jQuery.theNewestVersion();

//Now when I use $NEW, I'll know it's the newest version and won't
//conflict with the older version.
$NEW('#personName').text('Ben');

//And when I use the original $ in code, or simply 'jquery', I'll know
//it's the older version.
$('#personName').doSomethingWithTheOlderVersion();

UPDATE: After reading some of the answers, I'm starting to wonder if it's even a good idea to try to play this game at all...

Answer 1

You can use the jQuery noConflict method to achieve this.

<script type="text/javascript" src="jquery-1.1.3.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
    //Here, $ refers to the most recent jquery script loaded, which is version 1.4.2.
    $.noConflict();

    //Here, jQuery refers to 1.4.2 and $ refers to 1.1.3
    //You can setup an alias like so:
    var $NEW = jQuery;

    //Now, you can use old jQuery with $ and new jQuery with $NEW.
</script>

Answer 2

Possible ? Yes, in the same way that it's possible to run jQuery and another framework that uses the name $ at the same time. Include one copy of jQuery and assign it to a new name using noConflict , then do the same to another copy.

A good idea ? Really no , in the same way that running jQuery and another framework at the same time isn't a good idea, only more so. jQuery is a far-reaching, invasive framework. If two instances of jQuery start mutating the same element (and versions of jQuery before 1.4 are very promiscuous about what elements they touch), they are likely to confuse each other with unpredictable, timing-sensitive and undebuggable side-effects.

If at all possible, updating all the code to run under the latest jQuery is by far the better route. This really shouldn't be that difficult; the jQuery devs haven't broken much that code should ever have relied on in the first place.

Answer 3

You should not do this what so ever, $.noConflict() won't really help you in all cases.
This is because, internally, jQuery uses the alias name jQuery so forget about
any dollar sign $ re-assinging... if you will use any code that's using jQuery like this:
jQuery('div').doSomethingDepricated() then it will use the last defined jQuery loaded in the page. Now, if you use a plugin, which only works with old jQuery, and internally
it's written only using jQuery alias (not $ ), then it will break.

If you really want to use 2 jQuery scripts with different versions, you can do
search and replace on the 'jQuery' name on one of them, and change it to something else, then you can also re-assign it do any alias name via no-conflict method if you wish.

Answer 4

As an extension of EndangeredMassa's solution, I propose the following modification:

<script type="text/javascript" src="jquery-1.1.3.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
    //Here, $ refers to the most recent jquery script loaded, which is version 1.4.2.
    $.noConflict();

    //Here, jQuery refers to 1.4.2 and $ refers to 1.1.3
    //You can setup an alias like so:
    var $NEW = jQuery;

    // jQuery needs to refer to 1.1.3 again and not to 1.4.2
    var jQuery = $;

    //Now, you can use old jQuery with $ and new jQuery with $NEW.
</script>

Answer 5

Fix your old code to work with a recent jQuery version. Everything else is extremely hackish and will call the wrath of all developers who might have to work with your code in the future on you.