Drupal 6 jQuery in Under 5 Minutes

It’s simple, really. There’re three major things you need to master with jQuery:

1. Properly Initializing your script on document load

Avoid using $(document).ready() as described in jQuery documentation! Instead try to use Drupal.behaviours. Example:

Drupal.behaviors.modulename_subidentifier = function(context) {

$(”.someclass”, context).click(function(e) { e.preventDefault(); //...

Irakli Nadareishvili
#Drupal | Posted

It’s simple, really. There’re three major things you need to master with jQuery:

1. Properly Initializing your script on document load

Avoid using $(document).ready() as described in jQuery documentation! Instead try to use Drupal.behaviours. Example:

Drupal.behaviors.modulename_subidentifier = function(context) {    <br><br>  $(".someclass", context).click(function(e) {<br>       e.preventDefault();<br>       <br>       //... some really cool code here              <br>        <br>       return false;<br>   });<br><br>}

Attention: Drupal.behaviors is not simply a replacement for $(document).ready(), since the latter only runs once: when DOM is ready for manipulation, whereas behaviors can be fired multiple times during page execution. Behaviors can be run whenever new DOM elements are inserted into the document.

To write, proper jQuery code in Drupal we need to:

  1. Make sure we always include the second, “context” parameter in the jQuery selector expressions, unless it does not make sense. Sounds complicated? Well, usually in cases when selectors are used for “checking” something (number of elements in a specific list?) rather than manipulations, you want selectors to legitimately match entire document, in which case you would not pass context. Most of the time you do need to include context parameter, though. This is what Martin’s comment, below, was pointing out, too.
  1. If your Javascript code modifies DOM, let other behaviors know about it by firing: Drupal.attachBehaviors(context); so that they can react if they need to.

2. Properly passing variables to javascript

You need to use Drupal.settings for this.

In php code:

 $js_variables = array(<br>    'first_var' => $someobj->param,<br>    'second_var' => 24234+13123-12312+123123,<br>    'third_var' => $something_else<br> );<br><br>drupal_add_js(array('modulename' => $js_variables), "setting");

After which these variables can be accessed from Javascript code as follows:

  var iamhappy = Drupal.settings.modulename.first_var;<br>  var iamhappy_too = Drupal.settings.modulename.second_var;<br>  // etc..

3. String localization with Drupal

Now this one is super easy!

var something = Drupal.t('This string will be properly translated using Drupal translation interface');

It can even be parametrized!

var params = {
  “@firstvar”: “rendered in italic due to the @ prefix”,
  “!secondvar”: “rendered verbatim w/o HTML stripping due to ! prefix”,
  “%thirdvar”: “rendered with HTML stripped (safe)”
}; 
var txt = Drupal.t(“Don’t have to use all of them !secondvar %thirdvar.”, params);

P.S. Drupal.js also provides some theming abilities, but diving into those would have made the blog-post longer than what you can read in the promised 5 minutes. We will try to address that side of Drupal Javascript in a separate blog post.

Irakli Nadareishvili