Last updated July 21, 2016. Created on September 5, 2008.
Edited by kaldimar, geraldvillorente, subhojit777, m4olivei. Log in to edit this page.

The Drupal API function drupal_add_js() 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 is explained in more detail in the next section.

The final possibility for the second parameter 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.

Adding JavaScript from within a module

Adding JavaScript to a Drupal 8 module

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. Note, that putting this file into hook_init means it will run on every page request, whether needed or not. Here is how you would ensure the file gets added:

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

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

To add JS (or CSS) file from form builder function the recommended way is to use Form API #attached property as below,

$form['#attached']['js'] = array(
  drupal_get_path('module', 'ajax_example') . '/ajax_example.js',
);

See Form API reference for more details.

Adding JavaScript from within a theme

Adding JavaScript to a Drupal 8 theme

With drupal_add_js (Drupal 6 & 7)

(drupal_add_js is deprecated in Drupal 8; use '#attached' instead.) If you are adding your .js file from within a theme, then you simply need to make the call from within template.php, 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') . '/mytheme.js', array(
  'type' => 'file',
  'group' => JS_THEME,
));

Using the theme's .info file (Drupal 6 & 7)

You can add your script path in the .info file of your theme and Drupal will include them automatically.

name = My theme
description = Theme developed by me.
core = 7.x
engine = phptemplate

scripts[] = mytheme.js

Using a preprocess_page function

To conditionally add js to the theme, you can use a preprocess_page function:

function mytheme_preprocess_page(&$vars, $hook) {
  if (true) {
    drupal_add_js(drupal_get_path('theme', 'mytheme') . '/mytheme.js');
    $vars['scripts'] = drupal_get_js(); // necessary in D7?
  }
}

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

craigtockman’s picture

This is great until you switch to a new theme and then have to go back and change everywhere you called this to point to the new theme. This is what I do to advert this:

drupal_add_js(drupal_get_path('theme',$GLOBALS['theme']) .'/js/some-file.js');

It looks for your currently active theme.

nevets’s picture

Not really a good practice, it assumes the javascript is available for any theme. If you want javascript independent of the theme, it really should be add as part of a custom module from the modules directory.

Lakesideflight’s picture

Not sure if anyone else has had this problem or if it was unique to our site, but I tried putting the "drupal_add_js(drupal_get_path('module', 'mymodule') .'/mymodule.js');" in hook_init in my custom module(replacing mymodule with my custom module name), and had some problems with javascript not loading or getting executed in Internet Explorer 7 on Windows XP. Moving the drupal_add_js call to another part of the module, like the hook_form solved the problem.

ddarras2012’s picture

I may have missed it elsewhere in these comments, but I found this link ("right & simple way") on Stackexchange helpful for adding JavaScript to a module:

http://drupal.stackexchange.com/questions/132209/how-to-include-custom-js-file-in-any-module-in-drupal-7

philsward’s picture

If you need to add a js script at the theme level and you don't need it to do anything fancy, just link to an external js file, here's the code to make it happen:

drupal_add_js('https://somedomain.com/external-file.js', array('type' => 'external', 'scope' => 'header', 'weight' => 10));

Simply add the code to your themes template.php file and change the link to your requirement.

Note:
scope can be changed to 'footer' to add it to the footer of the page.
weight determines how high up or down in the list the file will be called on. If it needs to run earlier, give it a smaller weight. If you don't need it to run right away and it can wait until other things have loaded, give it a bigger weight. The number '10' is simply used as a reference.

In addition, this will load the file with the rest of the Drupal js files, meaning it will be aggregated along with the rest of your js links.

Additional info on what to add to the array can be found in the API docs: https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_...