0

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?

3

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.

| improve this answer | |
  • variables should be specific for Drupal.behaviors.backgroundAnimation – Himanshu Pathak Jan 22 '15 at 12:05
  • ??? @HimanshuPathak What does that mean? – Clive Jan 22 '15 at 12:06
  • He is calling js like Drupal.behaviors.backgroundAnimation, so we should make variables specific for object backgroundAnimation, see below ex – Himanshu Pathak Jan 22 '15 at 12:08
  • Your example is misleading - you're saying that the OP is accessing the wrong variable, when they aren't It's just coming from the global var rather than the local. And variable names are arbitrary, they do not have to be namespaced. What if that behaviour wanted to make use of another global var, perhaps the basePath? With your reasoning, that wouldn't be possible. – Clive Jan 22 '15 at 12:09
  • 1
    Thanks guys for help. This first line explains everything. That's what I was looking for. I was pretty sure that filename and settings should be somehow passed togather to use it, but as Clive explained clear enough that these are completly separate things. Thanks again guys. – David Jan 22 '15 at 12:22
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.

| improve this answer | |
1

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
| improve this answer | |
0

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');
| improve this answer | |
-3

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

| improve this answer | |
  • This is incorrect - that settings var is Drupal.settings. Drupal.settings.variableName and settings.variableName are the same variable. – Clive Jan 22 '15 at 12:08
  • my point was to define locally and call locally, globally does not make sense – Himanshu Pathak Jan 22 '15 at 12:12
  • 1
    You can't define locally, all settings go on the global Drupal object. Which just so happens to be passed along to all behaviour attachments, so you're incorrectly assuming it's a different var. It isn't – Clive Jan 22 '15 at 12:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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