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>

The second code block does actually work with CDN sources, yes, and relies on the fact that the reference to jQuery is cleared before loading up the second version. It is equivalent to the accepted answer. — Klemen Slavič, Nov 15 '12 at 20:22
So jqueryui v1.7.2 will use j$132 and jqyeryui v1.8.5 will use j$144? Sorry if this is a silly question — Oliver, Jul 11 '18 at 08:36

Klemen Slavič · Accepted Answer · 2012-11-15T20:24:24.567

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.

This completely defeats the purpose of the wrapper, which is to capture the reference to `jQuery` before the call to `jQuery.noConflict(true)`. jQuery UI is designed to support this out of the box. The proposed implementation in the question is actually correct and works just fine. — Scott González, Nov 15 '12 at 15:20
So jqueryui v1.7.2 will use j$132 and jqyeryui v1.8.5 will use j$144? Sorry if this is a silly question — Oliver, Jul 18 '18 at 08:21

score 2 · Answer 2 · answered Oct 26 '12 at 06:32

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.

Taha Rehman Siddiqui · Answer 3 · 2013-05-14T10:39:30.500

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.

Using different versions of jQuery and jQueryUI together

3 Answers3

Linked