On this page
- Resolving jQuery plugin dependencies in Drupal without touching the version in core (or using jQuery Update)
- Example
- How it works
- Drupal loads its own jQuery library
- Any other javascript runs
- Load the new jQuery library
- Load any plug-ins which require jQuery 1.3
- Run jquery-noconflict.js
- Use the plugin via the jQuery13 object
Multiple different versions of jQuery co-existing
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:
- Load the jQuery 1.3 library
- Load the "foo" plugin library
- 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
-
Drupal loads its own jQuery library
Before any of our javascript loads, Drupal has already loaded its default jQuery library.
-
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:
-
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 -
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). -
Run jquery-noconflict.js
var jQuery13 = jQuery;
copies the current definition ofjQuery
to a non-conflicting name.jQuery.noConflict(true);
tells jQuery to restore the global definitions ofjQuery()
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.
-
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$()
orjQuery()
$(document).ready(function(){ jQuery13("div.foo").foo(); }
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion