Adding Javascript to your Drupal 6 Module

By shane
Mon, 2011-06-06 13:21
comments
Drupal 6, Drupal Planet, Tips and Tricks, Javascript

Share with Others

Adding Javascript to a Drupal 6 Module is a pretty simple process. This post can serve as a very simple primer to get you started.

It starts with implementing hook_init() in your .module file.

/**
 * Implements hook_init().
 */
function MYMODULE_init() {
  drupal_add_js(drupal_get_path('module', 'MYMODULE') .'/MYMODULE.js');
}

Then you will need to create a Javascript file called MYMODULE.js in your module folder. Drupal by default comes with the JQuery library. Your Javascript file should look similar to the one below:


Drupal.behaviors.MYMODULE = function(context) {

}

All your Javascript code goes between the brackets. There are a few important things to note. First MYMODULE in the example code does not necessarily need to be the name of your module (although I would recommend it unless you have multiple Javascript files in your module). The next important thing is the context variable. The context variable seems dauntingly confusing when you first see it, however the purpose is pretty simple. The context variable allows you to basically remove the need to use JQuery's .live() function. This is useful if elements are added/altered on the page after the initial page load.

Here is a simple example of using the context variable in a click handler. In the example below any existing or new elements with a class of "my-class" will be hidden when clicked.


$('.my-class', context).click(function () {
$(this).hide();
});

Drupal 6 makes it easy to pass variables to your Javascript. There are many situations where this may be useful. For instance, one such situation I ran into was the need to pass a user configurable tax rate into the Javascript to be used in some client side calculations. Here is an example of how it might work:

First step is to set the variable in the hook_init() function:

/**
 * Implementation of hook_init().
 */
function MYMODULE_init() {
  //load the tax rate
  $tax_rate = variable_get('MYMODULE_tax_rate', .06);
 
  //add the tax rate variable to the Javascript (adds it to the Drupal.settings variable)
  drupal_add_js(array('MYMODULE_settings' => array('tax_rate' => $tax_rate)), 'setting');
 
  //add your modules Javascript file
  drupal_add_js(drupal_get_path('module', 'MYMODULE') .'/MYMODULE.js');
}

Now I can access this variable in my Javascript code:


Drupal.behaviors.MYMODULE = function(context) {
$('.my-class', context).click(function () {
alert(Drupal.settings.MYMODULE_settings.tax_rate);
});
}

The tax_rate is saved within the Drupal.settings variable. This makes it possible to pass in an array of settings variables inside the hook_init function to be easily accessible from within your Javascript code.

Here are some other helpful Drupal Javascript resources:

See any errors or have any questions? Post them in the comments below.