Drupal has functionality using AHAH and AJAX and Javascript and jQuery with the level of sophistication generally increasing in that order. AHAH is a simple AJAX approach where the data retrieved does not have to be parsed on the client side before being placed in a form. jQuery is a Javascript library built around a concise approach for selecting elements from the Document Object Model (DOM).

The jQuery documentation suggests using the following code

$(document).ready(function(){
// do some fancy stuff
});

This runs the code when the document is ready but before the page is completely loaded (images and media may still be loading). Drupal calls this function and suggests the following code be used instead

Drupal.behaviors.myModule = function (context) {
//do some fancy stuff
};

While this is true it is like reading the middle of the book without the start or end. Surely there is some more information such as where to put this magical snippet of code that might be useful.

Javascript

Let’s go back and start at the beginning. The code above is Javascript so first we need to know how Drupal handles Javascript. There are three ways to add Javascript code in Drupal 6.x. First, there is the Drupal core which puts Javascript code in the js directory. This is typically not of interest unless looking at the version of jQuery or adding jQuery plugins. As with most other Drupal approaches, the other two methods are themes and modules. The same result can be achieved either way but the application may suggest one way or the other as better.

Module development

For a module, the code would likely go in the myModule.module file where myModule is the name of your module. It could go in the hook_form function but in this case I will show it in the page callback function which calls the hook_form function. In the myModule_menu function you should have code like this

$items['myPage'] = array(
'title' => 'My Module',
'page callback' => 'myModule_page',
'access arguments' => array('access myModule content'),
'type' => MENU_CALLBACK
);

Then in myModule_page function

function myModule_page() {
//echo drupal_get_path('module','myModule') . '/myModule.js';
drupal_add_js(drupal_get_path('module','myModule') . '/myModule.js');

where code for dumping the path to the Javascript file is commented out.

Then in myModule.js the following code should produce the “Hello, World”.

Drupal.behaviors.myModule = function(context) {
alert(“Hello, World”);
}

The context could be the entire page or a snippet added by other Javascript code.

Themes

I have not used Javascript/jQuery using the theme approach but it should follow the same pattern as for the style.css file. Drupal 6.x is supposed to look for a script.js file in your theme directory and automatically load the code. The same code in the myModule.js above should work.