jQueries

One of the user interface designer headache issue is about the version of jQuery they need on a plugin and most of the time, the plugin require different jQuery version than the one that Drupal provide. jQuery Update is a very useful for those who can fit their required plugins with the most updated version of jQuery. However, in many circumstances, they have to load a lot of jQuery plugins those require different version of the jQuery.

Drupal itself or either the jQuery Update module allow only a single version of jQuery to be loaded on the same page. That the reason this module for.

This module allow multiple versions of jQuery instances loaded on the same page. Module developers implement the 'hook_jqueries_include()' to return an associative array of version of jQuery they required and the java script variable name they which to refer the the specify version.

How it works

Immediately, after the specific version jQuery is loaded, it assign the '$' variable to the user-specified variable and using jQuery's "noconflict" method to detach the jQuery object from the '$' variable. The java script then can refer to the specific version of jQuery via the different variable.

Example

In module code, the developer implements the hook_jqueries_include():

function my_module_jqueries_include() {
  if ( request_path() == 'my_page' ) {
    return array('1.6' => 'j16');
  }
}

In the page, the developer can refer to the Query 1.6 via the 'j16' variable like this:

  j16('#my_id').tabs();

Hooks

Two hooks are provided by this module as following:

hook_jqueries_alter(&$cdn) - By default, jQueries load jQuery from the Google CDN with the following version.

• 1.2 : https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
• 1.3 : https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
• 1.4 : https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
• 1.5 : https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
• 1.6 : https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
• 1.7 : https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

As well as the jQuery source, jQueries also load the jQuery UI with each version instance. Modules may implement hook_jqueries_alter() to alter the different jQuery source and the jQuery UI version. The $cdn variable is an array of the jQuery and jQuery UI source URL as following:

array(
  '<jquery_version>' => array(
    '<jquery_source_url>',
    '<jquery_ui_source_url>',
  ), ...
);

To load the plugins those work with the specific version, modules implement the hook_jqueries_alter() by add the source code to the version they need directly as following:

function my_module_jqueries_alter(&$cdn) {
  $path = base_path() . drupal_get_path('module', 'my_module');
  $cdn['1.6'][] = "$path/js/jquery.exposure.min.js";
}

hook_jqueries_alter($cdn) - To request for the versions of jQuery to be included into the page, modules implement hook_jqueries_include() to return the information about the jQuery version and variable name.

For example, if the module implements hook_jqueries_include() like this:

function my_module_jqueries_include() {
   return array('1.7' => 'j17');
}

Then, the module can refer to the jQuery 1.7 in the page using the JavaScript variable name "j17".

Tips
To replace the Drupal's standard jQuery with a specific jQuery verison, simply add the hook_jqueries_include() as above example, and then add the following code into your page:

<script type="text/javascript" charset="utf-8">
jQuery = j17; // from now, force using jQuery 1.7 instead of Drupal's jQuery
</script>

Plan for Version 1.1:
Gain the developer's controllability by provides 2 additional API for adding script into the namespace of specific version of jQuery. The API is now available in the development release.

• function jqueries_add_version($version, $name) add a specific jQueery with the specific variable name as it was done via the hook_jqueries_include().
  Example:

  jqueries_add_version('1.2', 'j12'); // add jQuery 1.2 into the page as a variable named j12
  

• function jqueries_add_js($version, $data, $options = NULL) associate a jQuery plugin or script into the given jQuery version.
  Example:

  jqueries_add_js('1.2', 'j12plugin.js'); // associate plugin 'j12plugin' with the instance of jQuery version 1.2