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

Posted by: 
Dominique De Cooman

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

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

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

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

Add new comment

Who are you?


By knowing who you are you will be directed to a page where we have displayed all our drupal services relevant to your professional identity.