In my short time as a Drupal developer, one specific issue had caused me much grief and lost time to find workarounds, and judging from Google search results and stories heard from our more experienced members of Jaxara, I was not alone. The issue is none other then the almost pre-historic (in technology time atleast) version of jQuery used by Drupal 6 (1.2.6).

Even using "jQuery Update" module doesn't do much good as it only upgrades the jQuery  version to 1.3.2. Try to solve the issue by manually adding a newer jQuery core file from your module's code using drupal_add_js(), well I pray that your site or the content page does not use Cufon or make use of Drupal's ahah, atleast for the sake of the hairs on your head sad. Well hope you are not trying to imagine what happened to my hairs, cause you can come see for yourself if you are curious, just don't be too disappointed wink.

The end result is wastage of hours trying to do something that can easily be done in minutes using a newer jQuery version or a jQuery UI widget. To the tremendous relief of my hairs, I finally found a solution, thanks largely to the wonderful developers of CiviCRM.

The solution lies in jQuery.noConflict(). From jQuery API documentation:

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict()

Let us look at a code example:

Suppose we have added a new version of jQuery via drupal_add_js() and added some custom JS code in our module's JS file:

<?php
......
drupal_add_js(drupal_get_path('module', 'jquery_ui') . '/jquery.ui/jquery-1.5.1.js');
jquery_ui_add(array('jquery.ui.core', 'jquery.ui.datepicker', 'jquery.ui.widget', 'jquery.ui.tabs'));
drupal_add_js(drupal_get_path('module', 'my_custom_module') . '/my_custom_module.js');
......
?>

 

Now inside "my_custom_module.js", we have the following code:

//Free up "$" from the new jQuery version and assign it to a new variable
var ej = jQuery.noConflict();

// Use the new jQuery version via the alias
ej(document).ready( function() {
ej("#edit-departing-date").datepicker({ dateFormat: 'yy-mm-dd' });
ej("#div_tabs").tabs();
});

// Completely remove the new version's jQuery object. Drupal's jQuery now has the scope.
jQuery.noConflict(true);

// Rest of code that uses Drupal's jQuery
....

 

 

That's it!! That is all we need. In the first two lines, we free up the "$" alias from our new jQuery (1.5.1) version object and assign the new jQuery object to another alias object, ej. After that we simply write all the code where we need to use the new jQuery version's capabilities. At the end, we completely remove the new version's jQuery object by passing true in the jQuery.noConflict() call.

The most important thing to remember here is that, after the initialization where we want to use the new jQuery version object, we need to use our created alias (ej in the example above) to call the updated object.

I hope this helps everyone as much as it has helped me.

 

 

Comments

ron's picture

 

Thanks Shoeb for sharing the solution.

Now it will be possible to let drupal 6 keeping its pre-historic jQuery version for its ahah needs as well as we can use the updated jQuery this way for extended functionality needs. 

Add new comment