Multiple different versions of jQuery co-existing

Last updated on
4 November 2016

Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites

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();
    }
    

Help improve this page

Page status: No known problems

You can: