Blog

Using multiple versions of jquery ui

If you are creating a javascript component that relies on jquery-ui a good approach is to use your own jquery-ui library, the reason is that jquery-ui can be tailored in very different ways so you can not expect that all the websites will have the version that you need. But things are not that easy, if you include your own version of jquery you can potentially break another component that also uses jquery-ui. or even worse, if another component add its own jQuery ui, that component could break yours!!.

That might not be a big deal if you are creating a component for yourself and you know that you will be using the same library for everything, but if you plan to distribute it (for example if that component is part of a wordpress plugin) you really need to fix this.

Why it breaks?

The problem is really easy, when you load  jquery-ui you are adding more functions to the jQuery variable (typically  $) so when another jquery-ui is loaded those functions are overridden with new functions, functions that could work different or could work with a different set of parameters or variables.

How can i fix it?

The solution is very easy too (not very elegant though) you basically need to do the following:

1.- Save the current jquery variable ($) in a different variable.- That way when your jquery-ui is loaded it wont affect the previous instance of jquery.

 var smartDonationsOldJQuery=jQuery;
 var smartDonationsOldCashSign=$;

2.- Load your own copy of jquery and jquery ui.- Here you create your own copy of jquery/jquery-ui that only you will use.

<script language="javascript" type="text/javascript" src="http://rednao.com/wp-content/plugins/smartdonations/js/jquery-1.9.1.min.js"></script>
<script language="javascript" type="text/javascript" src="http://rednao.com/wp-content/plugins/smartdonations/js/jquery-ui-1.10.2.custom.js"></script>

3.- Save your jquery variable into a different variable.- Here you save your copy in its own tiny space, separated from the rest of the world.

var rnSDJQ=jQuery;

4.- Load the previous version of jquery back to its original variable. And here you return everything back to normal, with the exception that now you have your own, unobtrusive copy of JQuery.

window.jQuery =smartDonationsOldJQuery;
window.$ = smartDonationsOldCashSign;

 This way you will have your own copy of jquery isolated, you can load whichever version of jquery/jquery-ui that you want and be assured that you are not going to affect any other place of the site and viceversa.

This is the full code:

<script language="javascript" type="text/javascript">
 var smartDonationsOldJQuery=jQuery;
 var smartDonationsOldCashSign=$;
</script>

<script language="javascript" type="text/javascript" src="http://rednao.com/wp-content/plugins/smartdonations/js/jquery-1.9.1.min.js"></script>
<script language="javascript" type="text/javascript" src="http://rednao.com/wp-content/plugins/smartdonations/js/jquery-ui-1.10.2.custom.js"></script>

<script language="javascript" type="text/javascript">
 var rnSDJQ=jQuery;
 window.jQuery =smartDonationsOldJQuery;
 window.$ = smartDonationsOldCashSign;
</script>

My Third Post!! thank you so much for reading this, and as always, if you like it and it helped you please, share it!!.

4

About the Author:

Im programmer working for an international company. I have programmed since i was 12 and i have done it professionally for 6 years. Programming for a company is fun and i have learned a lot of things but i have always been interested in running my own business so i decided to give it a shot doing what i do best, programming stuffs.
  Related Posts
  • No related posts found.

Comments

  1. Pedro  August 8, 2013

    Thanks! Just that I need

    reply
    • Edgar Rojas  August 12, 2013

      Great!! Thanks for sharing =).

      reply
  2. Reynaldo Zabala  September 17, 2013

    How is this different from using the NoConflict construct? I’ve recently run into an issue with needing to use a jquery widget (autocomplete combobox from jquery 1.10.3) but the master pages where my html snippet will reside already have 1.7.2 jquery ui loaded. Thoughts?

    reply
    • Edgar Rojas  September 17, 2013

      Hello!, NoConflicts only work for JQuery, not JQuery UI. In your case i would first save a copy of jquery 1.7.2 then load my copy of jquery 1.10.3 and auto complete and then restore the previous version of jquery.

      reply

Leave a Reply to Edgar Rojas
click here to cancel reply