Info on Drupal.settings and #attached

Question

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.

Answer 1

#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
    }
  };

Answer 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();