Last updated November 6, 2013. Created by Signify on September 16, 2009.
Edited by goron. Log in to edit this page.

or:

Resolving jQuery plugin dependencies in Drupal without touching the version in core (or using jQuery Update)

NOTE: The jQuery Multi module provides a way to implement this method using a UI or hooks.

Recent versions of jQuery include a noConflict() function which restore the previous definition of the $() function and, optionally, the jQuery() function.

This provides a way of using later versions of jQuery for particular purposes, without affecting the version that core and contrib are using.

Example

Problem: We want to use the "foo" jQuery plugin in our theme, but it needs jQuery 1.3.

Solution: In our theme's .info file, carefully specify the order of the scripts:

  1. Load the jQuery 1.3 library
  2. Load the "foo" plugin library
  3. Load and execute a custom "noConflict" script

e.g.:

scripts[] = [...]
scripts[] = scripts/jquery-132.js
scripts[] = scripts/jquery.foo.js
scripts[] = scripts/jquery-noconflict.js
scripts[] = [...]

jquery-noconflict.js looks like this:

var jQuery13 = jQuery;
jQuery.noConflict(true);

How it works

  1. Drupal loads its own jQuery library

    Before any of our javascript loads, Drupal has already loaded its default jQuery library.

  2. Any other javascript runs

    It's okay for other javascript to run at this stage, just so long as the next three steps all happen in direct sequence:

  3. Load the new jQuery library

    When jQuery 1.3 loads, it copies any pre-existing definitions of jQuery() and $() to 'backup' variables _jQuery and _$, before defining its own replacement versions.

    The global jQuery() and $() now refer to jQuery 1.3

  4. Load any plug-ins which require jQuery 1.3

    jQuery plug-ins attach themselves as methods to the global jQuery object. Because the global jQuery is (for the moment) jQuery 1.3, this means the plug-in will attach itself as a method available to jQuery 1.3 (and not available to the original jQuery).

  5. Run jquery-noconflict.js

    var jQuery13 = jQuery; copies the current definition of jQuery to a non-conflicting name.

    jQuery.noConflict(true); tells jQuery to restore the global definitions of jQuery() and $() to whatever they were before jQuery 1.3 loaded.

    This means that they once again refer to the original core jQuery library supplied with Drupal, while our new jQuery13 object remains in existence, along with the plugins that attached themselves to it.

  6. Use the plugin via the jQuery13 object

    Because the global names have already been tidied up, it doesn't matter when this code runs.

    Just use jQuery13() instead of using $() or jQuery()

    $(document).ready(function(){
      jQuery13("div.foo").foo();
    }

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

Another option to this is to do something like

<?php
function yourModuleOrThemeName_preprocess_page(&$variables) {
  if(
arg(0) == 'yourPage') {
   
$scripts = drupal_add_js();
   
$new_jquery = array('yourNewJQueryPath/jquery14.js' => $scripts['core']['misc/jquery.js']);
   
$scripts['core'] = array_merge($new_jquery, $scripts['core']);
    unset(
$scripts['core']['misc/jquery.js']);
   
$variables['scripts'] = drupal_get_js('header', $scripts);
  }
}
?>

I've written more about it at http://andy-walters.com/how-to-load-a-different-version-of-jquery-per-pa...

Excellent. This is working beautifully for me (though I had to change $variables to $vars in Drupal 6.13). I need to apply the updated jquery, though, on any page displaying a certain node-type. What test would I put in the if condition to make that work? Thanks again!

This solved my problem...thanks.

In case you wish a different jQuery for a node form only, you can use hook_form_alter()

<?php
function YOURMODULE_form_alter(&$form, &$form_state, $form_id) {
  if (isset(
$form['type']) && isset($form['#node']) && $form_id == 'CONTENT_node_form') {
   
$path = drupal_get_path('module', 'YOURMODULE');
   
drupal_add_js($path . '/js/jquery-1.4.2.min.js');
   
drupal_add_js($path . '/js/jquery-ui-1.8.2.custom.min.js');
   
drupal_add_js($path . '/js/jquery.carrousel.js');
   
drupal_add_js($path . '/js/jquery.ui.slider.js');
   
//drupal_add_js($path . '/js/ANY_OTHER_PLUGIN');
   
drupal_add_js($path . '/js/jquery-noconflict.js');
   
//drupal_add_js($path . '/js/YOUR_JS_CODE');
 
}
}
?>

In jquery-noconflict.js you have:

var jQuery14 = jQuery;
jQuery.noConflict(true);

And your own js code should use jQuery14() instead of using $() or jQuery()

It does not work for me. Since jquery no conflict is called after jQuery14 calls were made, I am getting jQuery14 is undefined. Any tips?

PS: I take it back. I changed the document ready to jQuery142 as well, but I shouldn't have. It works now.

Yeah, same thing happened here. This line got me:

jQuery163(document).ready(function () {

When it should be this:

jQuery(document).ready(function () {

took me a second to figure out exactly what you were talking about. Changed everything EXCEPT that, and it's golden. Thanks for posting!

Works for me!

This module http://drupal.org/project/jqmulti allows choosing new version of jQuery when loading a specific library.

Yes, jQuery Multi allows you to run another version of jQuery in parallel, as described on this page, and target specific libraries to use it. It also allows you to load any JS file with the second version of jQuery and use the second version in any script.

This worked perfectly for me. Thanks for the clearly outlined instructions.