Adding JavaScript to your theme or module

The most important function you need to know for using jQuery in your Drupal theme or module is drupal_add_js(). This function lets you add a JavaScript file, setting or inline code to the page and it takes 5 parameters (see the api reference).

The first parameter is always going to be a path to a js file, an array, or a piece of javascript code. If the second parameter is 'module' (the default), 'theme', or 'core', then the first parameter must be a path and the only difference between these three is the order in which the script tag will be placed relative to other scripts, i.e. core scripts first, then module scripts and finally theme scripts.

If the second parameter is 'setting', then the first parameter must be an array of settings. This is very handy for telling JavaScript about the configuration settings for your module, for example, and will be explained in more detail in a later section.

The final possibility for the second paramenter is"inline" and this means you are passing in straight JavaScript code as your first parameter, which you want written directly to your page between script tags, rather than a call to a file.

These two are the most important parameters for this function - indeed you may never even use the second one if all you ever want to do is add a js file for your module - but you can learn about the other parameters by reading this function's documentation at api.drupal.org.

So, let's say you have written some jQuery code that targets some of the elements that are output by your module or theme. You simply need to save your jquery code as a JavaScript file (i.e. with the .js extension) and place it in your module or theme's directory. If it's for a module, you then need to make the call to drupal_add_js() as above, from wherever the module is about to output content (e.g. in hook_block or hook_nodeapi), or if the JS is not acting on content output by your own module you can call it from hook_menu or hook_init. Here is how you would ensure the file gets added:

drupal_add_js(drupal_get_path('module', 'mymodule') .'/my_js_file.js');

The jquery.js file is included automatically so you don't need to worry about adding it.

If you are adding your .js file from within a theme, then you simply need to make the call from within template.php, and don't forget you need to add the second parameter this time as 'theme' so that Drupal knows this script should be loaded after all core and module scripts are loaded:

drupal_add_js(drupal_get_path('theme', 'mytheme') .'/my_js_file.js', 'theme');

‹ 3. Introducing jQueryup5. The Drupal JavaScript API ›