How do I include a JavaScript file and pass the value of a PHP variable with a single function call?

Question

I'm trying to pass a PHP variable to my JavaScript file. The file is js/backgroundConfig.js, it's in the theme directory, and this is the content of the file.

(function($, Drupal){
  Drupal.behaviors.backgroundAnimation = {
    attach: function(context, settings) {
      alert(Drupal.settings.variableName);
      alert(Drupal.settings.basePath);
    }
  };
})(jQuery, Drupal);

Drupal.settings.basePath is displayed correctly, but I've no idea how to pass variableName from template.php. I've tried a couple of methods but none of them work.

There are tons of examples on the web but none of them contains the filename and the settings together. Like this one:

drupal_add_js(array('variableName' => 'value'), 'setting');

Alright, but where I should put my filename? I always add my JavaScript file like this.

drupal_add_js(path_to_theme().'/js/backgroundConfig.js');

How do I combine it together?

Answer 1

How to combine it togather?

You don't - Javascript files and settings are two completely different things. Anything you add to the settings will be available on the global Drupal object, which will be available by the time the code in your JS file is invoked.

Your code should be:

drupal_add_js(array('variableName' => 'value'), 'setting');
drupal_add_js(path_to_theme().'/js/backgroundConfig.js');

Or the other way round, it really doesn't matter.

Answer 2

You are really close. There's a small error and perhaps a bit of misunderstanding.

First, adding a setting should be (taken from api.d.o):

drupal_add_js(array('myModule' => array('key' => 'value')), 'setting');

This setting can now be accessed in a .js file via Drupal.settings.myModule.key. The first array key above is the name that you will use to access your settings object in Drupal.settings. This way you can add multiple settings to Drupal.settings.myModule if required.

When you're adding js via drupal_add_js, there's really two different things that can happen. If you're adding a file, like backgroundConfig.js, Drupal will actually load that file into the HTML, allow it to be aggregated, etc.

When adding a setting, there is no file to be added, rather all it does is create that setting as an object within the global Drupal.settings JavaScript object that is present on every page.

So, in summary, you can add a file, or add a setting. Often this setting will be used by a module/theme's behaviour to determine how it is to function on a given page or context.

Also, in your browser, try opening up your Web Inspector, go to the console, and type Drupal to get a better idea of what's happening here and how other modules and themes use this feature.

Answer 3

An example would probably be best:

The PHP:

drupal_add_js(array('myvar' => 'value'), 'setting');

The JS:

(function($){
  Drupal.behaviors.backgroundAnimation = {
    attach: function(context, settings) {
      alert(settings.myvar); // Should alert 'value'
    }
  };
})(jQuery);

It's usually good idea to group your settings using the module name like so:

drupal_add_js(array('mymodule' => array('myvar' => 'value')), 'setting');

So to access it via JS you do like so:

settings.mymodule.myvar

Answer 4

In general, you cannot use a single drupal_add_js() call to add:

• Two or more internal scripts
• Two or more external scripts
• An external script, an internal script, and a setting

If you need to add one or more of those, you simply call drupal_add_js() more than once. The code you shown is perfectly fine.

drupal_add_js(array('variableName' => 'value'), 'setting');
drupal_add_js(path_to_theme().'/js/backgroundConfig.js');

Eventually, to avoid conflicts with other themes/modules, and if the value is used only from your theme, you should use the name of your theme/module as array key for the settings.

drupal_add_js(array('themename' => array('variableName' => 'value')), 'setting');
drupal_add_js(path_to_theme().'/js/backgroundConfig.js');

Answer 5

Suppose there is some function in template.php

function THEMENAME_preprocess_page(&$vars) {
  drupal_add_js(array('backgroundAnimation' => array('variableSetting' => 'VariableSetting_output', 'variableSetting1' => 'Himanshu')), array('type' => 'setting'));
  drupal_add_js(path_to_theme().'/js/backgroundConfig.js');
}

Place the file backgroundConfig.js at proper location. Then in JS file write like

(function ($) {
Drupal.behaviors.backgroundAnimation = {
    attach: function (context, settings) {
        alert('js file loaded');
        console.log(settings);
        alert('basePath is ' + settings.basePath);
        alert(settings.backgroundAnimation.variableSetting);
        alert(settings.backgroundAnimation.variableSetting1);
    }
};

})(jQuery);