Blog

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.

[javascript] var smartDonationsOldJQuery=jQuery;
var smartDonationsOldCashSign=$;
[/javascript]

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.

[xml] <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>
[/xml]

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.

[javascript] var rnSDJQ=jQuery;
[/javascript]

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.

[javascript] window.jQuery =smartDonationsOldJQuery;
window.$ = smartDonationsOldCashSign;
[/javascript]

 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:

[javascript htmlscript=”true”] <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>
[/javascript]

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