4

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?

Rune FS
  • 21,497
  • 7
  • 62
  • 96
  • Any error messages? Are you trying to load two versions in the same site? Or are you saying you have two sites, each using their own version and one won't work? – Jeff Sheldon Jun 15 '11 at 14:05

3 Answers3

7

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.

Jack Cole
  • 1,528
  • 2
  • 19
  • 41
2

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

Edgar
  • 21
  • 2
2

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.

T9b
  • 3,312
  • 5
  • 31
  • 50
  • at least it's the closest to any one came :). It doesn't really adress the issue of loading the same build version of UI twice but the problem might be the same though – Rune FS Jul 04 '11 at 10:04
  • 6
    "[on the] jQuery UI build page ... you can regenerate the UI with a context" Do you have a reference for this? The jQuery UI build page at https://jqueryui.com/download/ seems not to mention anything called 'CONTEXT', and it doesn't seem to have controls to add such a thing. – fooquency Mar 01 '14 at 13:54
  • I believe giving jQuery UI its own "context" is what Edger explains in his answer (https://stackoverflow.com/a/15836272/2598101). Essentially, you temporarily store the jQuery variable in a variable like `var jQuery1 = window.jQuery;`, then load the script (either inline in the HTML with the ` – Joseph Shih May 25 '19 at 02:11