using multiple jquery-ui versions

Question

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?

Answer 1

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.