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 jQuery 1.4.4 and jQueryUI 1.8.5 in parallel.

I have seen that different versions of jQuery can be used in parallel like so:

    <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> 

But would this also hold true for the following:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.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" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>     <script type="text/javascript">         var j$144 = $.noConflict(true);     </script> 

Answer 1

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 2

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.