current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm trying to pass variable to my js file. The file is located in my theme /js directory. The filename is backgroundConfig and this is the content of file: 

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

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

There are tons of examples on the web but none of them contains the file name and the settings togather. Like this one: 

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

Alright, but where I should put my filename? I always add my js file like this:

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

How to combine it togather? Detailed explanation would be useful, because there's no good example, at least I haven't found any. :(

share|improve this question
    
possible duplicate of How to pass values from php to javascript properly? –  Mołot Jan 22 at 12:12

4 Answers 4

up vote 3 down vote accepted

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.

share|improve this answer
    
variables should be specific for Drupal.behaviors.backgroundAnimation –  Himanshu Pathak Jan 22 at 12:05
    
??? @HimanshuPathak What does that mean? –  Clive♦ Jan 22 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 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 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 at 12:22
up vote 1 down vote

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
share|improve this answer
up vote -3 down vote

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

share|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 at 12:08
    
my point was to define locally and call locally, globally does not make sense –  Himanshu Pathak Jan 22 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 at 12:13
up vote 1 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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