Using different versions of jQuery and jQueryUI together

Question

I am working on a project where their framework uses jQuery 1.3.2 and jQueryUI 1.7.2.

Upgrading the versions in the framework is not a possibility so i wanted to run

Answer 1

I got to this page because I have the same problem as described in the original question but the answer given does not completely solve it (anymore).

I needed to add an auto suggest to a page that has a lot of existing code using jquery, there was no easy way to just update to the new jquery and jquery ui so tried to use the newer version next to the old one.

Besides editing the jqueryui last line the jquery ui has a lot of jQuery references that you need to change as well so I used an editor that can replace using regular expression and replaced: \bjQuery\b with j$182

An in the page I added:

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        var j$182 = $.noConflict(true);
        </script>
<script type="text/javascript" src="jqueryui1.9.0.js"></script>

Now both existing script on the page and the new auto suggest are working.

Answer 2

AFAIK, there's no $.noConflict() equivalent for jQuery UI. You can, however, use a local copy of jQuery UI and wrap the whole JS using a similar trick to what you use for aliasing the different libraries:

(function(jQuery) {
  // ... the jQuery UI lib code for jQuery 1.3.2
})(j$132);

This could be elegantly implemented using a server-side build script or a handler that serves the JS files but wraps the contents with the above code.

Haven't tested this approach, so you may have to fiddle around with the function parameter (although I think it's safe to assume it uses jQuery to reference jQuery within the plugin code).

The way you'd use this is declare both versions of jQuery:

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

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

... and then include your UI code, as I've specified above.

And no, you can't do this while referencing the UI JS files from Google CDN.

EDIT: The second code block in the question is actually a better solution than this answer, since it doesn't require wrapping the original UI code in a self-executing function and passing the specific version. Both approaches do result in exactly the same state on the page.

Answer 3

I just figured a solution and it works for me.

In the Jquery library, after the last line type

var mySelector = $;

Include the other version after you include this in your page.

now, in all the scripts that you want to use with this jquery version(even jquery ui and other libraries too), replace $ with mySelector. Use replaceall, there will be a couple of places, like in regex match functions where you would want to replace mySelector back to $. This problem was bugging me for quite a long time. And it just got solved.

EDITTED : be sure that you do not replace any $ inside the jQuery original script.