8

I'm trying to use Drupal.settings for the first time to pass variables from PHP to JavaScript. The documentation on the topic is sparse and I have a few issues.

Is it possible to use #attached to pass through the settings rather than drupal_add_js(array('myModule' => $settings), 'setting');? The reason I am asking is that I've been told that #attached is the "correct" way to add settings. ( I know it is also the correct way to add files also, but not sure if it works with settings variables.)

I'm using the following code, but I can't get it to load under the DOM objects and I am stuck.

(function ($) {
   Drupal.behaviors.myModule = {
     attach: function(context, settings) {}
   };
});(jQuery);

Any advice would be greatly appreciated. Please bear in mind that this is the first time I've set out to use Drupal.settings, so every detail is welcome and appreciated.

2 Answers 2

6

#attached can be used as follows.

$form['#attached']['js'][] = array(
  'data' => array(
    'xx_system' => array(
        'xx_code' => variable_get('xx_code', 'xx'),
        'xx_key' => variable_get('xx_key', 'xx'),
      ),
    ),
  'type' => 'setting',
);

With drupal_add_js(), you can use the following code.

 drupal_add_js(array('orgs' => $orgs), array('type' => 'setting'));
 drupal_add_js(drupal_get_path('module', 'module_name') . '/module_name.js');

In a JavaScript file, you can get the value of the variables as follows.

  Drupal.behaviors.module_name = {
    attach: function (context, settings) {
      var cities = Drupal.settings.orgs.cities;// you will get the cities value here
    }
  };
10
  • Thanks, Isn't that confined to the scope of a $form, for JS in every page shouldn't I use hook_page_alter with; $page['header']['#attached']['js'] etc. ?
    – Pluto
    Commented Sep 21, 2013 at 16:26
  • besides I had mentioned above about files, my question relates to Drupal.settings, i.e. passing PHP variables and arrays through.
    – Pluto
    Commented Sep 21, 2013 at 16:28
  • you can check the updated answer
    – harshal
    Commented Sep 21, 2013 at 16:45
  • Thanks again, but what I can't understand is why these examples always use $form, what about render arrays and adding js to every page?
    – Pluto
    Commented Sep 21, 2013 at 16:50
  • To expand, when I've added js files using $form/#attached, they have only loaded within the $form array.
    – Pluto
    Commented Sep 21, 2013 at 16:53
2

Many thanks for the responses posted.

As mentioned in the original question, the issue was not how to load CSS & JS files using #attached, but how to pass variables through to Drupal.settings using #attached and not drupal_add_js(). There are best practice issues surrounding drupal_add_js with regard to caching and availability under the DOM.

After some research I have the solution. The following example uses #attached to load a JS file AND to pass PHP variables through by attaching them to the $page array (render array).

hook_page_alter() {

  $my_PHP_variable  // or array of variables

  $page['header']['#attached']['js'] = array(
    drupal_get_path('module', 'mymodule') . '/js/mymodule.js' => array(),
    array(
      // Pass PHP variables to Drupal.settings.
      'data' => array('myModuleVarSet' => $my_PHP_variable),
      'type' => 'setting',
   ),
);
}

So the reason I want to do this is that I want to pass variable states from PHP/Drupal to a jQuery file, such as booleans etc.. With the example above, I can now access that 'state' using:

var myVar = Drupal.settings.myModuleVarSet.my_PHP_variable; 

This is all done without touching drupal_add_js();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.