We have two sites using jQuery UI and one of the sites includes some pieces from the other site. Those pieces are build on Jquery UI Accordion but I can't get both versions of the UI to load. One is a custom build of 1.8.11 the other is a full version (the full won't load)
any suggestions?
Figured this out after an hour. For some reason no one has explained this on the internet.
First you call the version of jQuery you want to be noconflicted:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
var $jnine = jQuery.noConflict();
</script>
In this case, I called the new jQuery $jnine, in reference to the version number.
Now you need to edit jquery-ui-1.10.0.custom.min.js. This is actually very simple. Open it up with your favorite text editor that supports search and replace. Notepad++ is in my opinion the very best.
Now you are going to search for (jQuery), case sensitive, and replace it with ($jnine) Then save the file wherever and run it on your site AFTER the noConflict() function has been ran.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
var $jnine = jQuery.noConflict();
</script>
<script src="js/jquery-ui-1.10.0.custom_jnine.min.js"></script>
Now you can call all jQuery and jQuery ui functions with $jnine
Rememver: It is important you run this script BEFORE any other jQueries are loaded, unless they were also noConflicted.
Please read the documentation on JQUERY UI. You cannot use two versions of the UI without specifying a CONTEXT for each one.
This allows you to use multiple UIs on one page for example.
The bad news is that once the file has been generated you cannot then add the context afterwards.
I'm not sure but I think in the javascript files assciated with the UI there is a link that will take you to the JQUERY UI build page, and there you can regenerate the UI with a context.
var jQuery1 = window.jQuery;, then load the script (either inline in the HTML with the <script> tag or programmatically in JavaScript followed by an onload callback), then setting the freshly loaded jQuery to another variable like var jQuery2 = window.jQuery; and then restoring the old one like window.jQuery = jQuery1;.Another options is to load your ui into its own context.
<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>
The good thing about this is that you will have your own copy of jquery/jquery-ui insolated from the rest of the code (this is really good if you are creating components, like wordpress components) the bad thing is that you will have to load jquery again.
More info here (disclaimer, i wrote it): Using multiple versions of jquery ui
