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>
Yes, you can use multiple versions of jQuery on the same page. To avoid any kind of conflict, use the jQuery. noConflict() method.
JQuery is basically the base of JQuery UI and is the more powerful between the two. It should be used for more advanced work that requires custom code and interactions. For basic user interface needs, using the JQuery UI is very beneficial as it reduces the complexity of coding and speeds up the entire process.
For anyone who needs to know the compatibility of jQuery UI with jQuery, jQueryUI 1.13 ( most recent as of today ) supports all jQuery versions ( from 1.8 upto 3.6 - most recent ).
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With