Drupal Jquery : How to add a setting from php to your jquery script

jquery
Posted by: 
Dominique De Cooman
On: 
Wednesday, May 12, 2010 - 22:32

For example we want to add an api key as a variable to our jquery script. In drupal we define our apikey using a settings form. We add the js using drupal_add_js. Notice that the second parameter says 'setting', this is used to tell the drupal javascript system to add the array as a setting in scripts. The Jquery object is allready extended with Drupal.settings and this is where our setting will be available.
To avoid namespace clashes it is good practice to put variables in arrays by module.

<?php
function module_name_settings() {
  $form['module_name_apikey'] = array(
       '#type'           => 'textfield',
       '#title'          => t('Google api key'),
       '#default_value'  => variable_get('module_name_apikey', ''),
       '#size'           => 60,
       '#weight' => -5,
       '#description'    => l(t('Get your google api key here'), '<a href="http://code.google.com/apis/maps/signup.html'">http://code.google.com/apis/maps/signup.html'</a>),
  );

  system_settings_form($form);
}

//Implementation of hook init()
function module_name_init() {
  drupal_add_js(
    array(
      'module_name' => array(
        'apikey' => variable_get('module_name_apikey', ''),
      )
    ),
    'setting'
  );
}
?>

In your jquery script the variable will be available in Drupal.settings

var apikey = Drupal.settings.module_name.apikey;
//To view output in firebug
console.log(apikey);
//If you dont use firebug
alert(apikey);

Comments

Drupal Jquery : How to add a setting from php to your jquery script

Submitted by Craig (not verified) on Thu, 2010-06-03 16:03

hi dominique

(suggestion: add the datetime to your article posts)

great article. was exactly what i was looking for. my issue was around being able to create drupal links on the server side, and pass them to my javascript. needed to be able to have ajax working, whether the webserver was rewriting urls or not.

so, you gave me the technique i needed. one small adjustment i would add, is to do a path check with a static var, to keep from inserting this javascript where you don't need it, or inserting it multiple times on a page.

<?php
function module_name_init() {
  // Only add on specific pages
  if (arg(1) === 'module_name' && arg(2) === 'mypath' ) {
    static $complete = FALSE;
    // Only need to do once per page.
    if (!$complete) {  
      drupal_add_js(array(
        array(
        'module_name' => array(
          'apikey' => variable_get('module_name_apikey', ''),
        )
      ),
      'setting'
      );
      $complete = TRUE;
    }
  }
?>

Drupal Jquery : How to add a setting from php to your jquery script

Submitted by Dominique De Cooman on Mon, 2010-06-14 16:04

Good suggestion craig, you should indeed add checks when using hook_init() because its run on every page load. Also note that hook_init is not called when aggresive caching is on.
Even better is to include the drupal_add_js only where you script needs it and not in hook init.
Btw I also use the same technique you say to construct paths for the ajax calls :)

Drupal Jquery : How to add a setting from php to your jquery script

Submitted by Matthew (not verified) on Fri, 2012-04-27 19:01

A few years afterwards, but THANK YOU for the DETAILED instructions. Helped me finish up something.

Add new comment