How to use drupal_add_library with a module?

Question

I'm new to Drupal and don't really understand how to set up drupal_add_library.

I've made a simple module that links out to a .js file. However, this .js file depends on a couple of generic functions. I've put this generic functions in a library and want to call them.

I've set up my code as such:

function products_preprocess_page(&$variables) {
  drupal_add_library($module, $name);
  drupal_add_js(drupal_get_path('module', 'products') . '/assets/myScript.js');
}

But am not sure what to put in $module and $name (I'm assuming name is the actual name of the .js you want to call from the library), or even if this is the right place to call it.

Can anyone point me in the right direction?

apaderno · Answer

The arguments required by drupal_add_library() are the following.

$module: The machine name of the module that registered the library in a hook_library() implementation
$name: The name of the library to add

For example, for the farbtastic library, the call to drupal_add_library() should be drupal_add_library('system', 'farbastic'), since that library is defined in system_library().
Adding libraries and JavaScript in hook_preprocess_page() is probably too late, as  template_process_html() already added them to the page markup.
  $variables['head'] = drupal_get_html_head();
  $variables['css'] = drupal_add_css();
  $variables['styles'] = drupal_get_css();
  $variables['scripts'] = drupal_get_js();

It's preferable to use hook_page_build() to add the library (and the JavaScript code) using the #attached property as described in How to add jQuery UI libraries to a page. (Despite the title, what described is valid for every library and JavaScript code.)
Since #attached can be used in any render array or form array, it can be used in any hook that returns a render or a form array, or that alters a render or a form array, including hook_form_alter().
  // Adds a form field that the javascript utilizes or modifies.
  $form['location'] = array(
    '#type' => 'textfield',
    '#title' => 'Your Location (Country)',
    '#id' => 'country_autocomplete',
    // Both the library and custom JavaScript code are added to the '#attached'
    // property of a renderable array.
    '#attached' => array(
      'library' => array(
        array('system', 'ui.autocomplete'),
      ),
      'js' => array(
        "$path/mymodule-custom-javascript.js",
      ),
    ),
  ); 
}

Drupal can use only the libraries that are added with hook_library(), which means that a module that wants to use its own libraries needs to hook_library() too.
You can also add a scripts[] line in the module/theme .info file if that JavaScript code needs to be added to every page, as described in Writing module .info files (Drupal 7.x). This allows JavaScript to be aggregated in an optimal way.
CSS styles can also be added with stylesheets[].
stylesheets[all][] = node.css
scripts[] = somescript.js

Darvanen · Answer

You can call it in that hook if you want it on every page (or add some logic to restrict the pages that it loads on), that's fine.
As per the API:

$module: The name of the module that registered the library.
$name: The name of the library to add.

If you're creating your own library, Jimmy Ko is correct: you need to declare it in hook_library.
Note that $name should exclude the file extension (e.g. .js)

How to use drupal_add_library with a module?

2 Answers

Add your own answers!

Ask a Question