42

I hope someone is able to help me. The problem is the following one: 1)I have module in which a assign the variable in order to send to the template file php.tpl

<?php
...
$testvar="Hello from alex!";
$variables['testvar'] = $testvar; 
...
?>

This variable can be shown in the php.tpl file like

<?php print $testvar?>

2)I have separated .js file How can i get access to this varuiable inside .js file?

I know how it'll be if .js file is inside .php.tpl:

<?php
$testvar="Hello from alex!";
?>
<script type="text/javascript">
var myVar = '<?php print $testvar?>';
</script>

The problem is how to do the same if these two files .js and .php.tpl are separated?

2
  • 2
    don't blindly echo out a variable into Javascript. If there's any Javascript metacharacters (single quotes, especially), you'll introduce syntax errors. Do var myVar = <?php echo json_encode($testvar) ?>; which will take care of any such issues for you, regardless of the PHP var's data-type/content.
    – Marc B
    May 11, 2011 at 14:17
  • List of Drupal 7 js tips and tricks browse-tutorials.com/tutorial/javascript-drupal-7
    – ram4nd
    Sep 7, 2017 at 10:33

3 Answers 3

70

You should use drupal_add_js() in your module, there is no need to output the variable in your .tpl.php:

drupal_add_js(array('YOURMODULE' => array('testvar' => $testvar)), array('type' => 'setting'));

And in your JavaScript, you can the access the value in Drupal.settings.YOURMODULE.testvar:

alert(Drupal.settings.YOURMODULE.testvar);

Direct usage of global variables (as suggested in your code sample) is a discouraged practice in JavaScript as it clutter the global namespace. Also, if your code is triggered on page load, check the "Behaviors" section in Managing JavaScript in Drupal 7 documention (the whole page is worth reading).

0
19

In your MODULENAME.module file use the following code.

$testVariable = 'himanshu';
drupal_add_js(array('MODULENAME' => array('testvar' => $testVariable)), array('type' => 'setting'));
drupal_add_js(drupal_get_path('module', 'MODULENAME') . '/MODULENAME.js');

And in MODULENAME.js use the following one.

(function($) {
  Drupal.behaviors.MODULENAME = {
    attach: function (context, settings) {
      alert(settings.MODULENAME.testvar);
    }
  };

})(jQuery);

In this way, you can pass your PHP variable to JavaScript, and use it.

1
  • What does the function do and when is it triggered? Why not to use directly Drupal.settings.YOURMODULE.testvar?
    – Axel Stone
    May 4, 2017 at 7:40
10

For Drupal 8, drupal_add_js() was removed (it was deprecated in Drupal 7 already) => see this for further information.

The way to send PHP information to Javascript is perfectly described by @4k4's answer to a similar question.

return [
  '#theme' => 'item_list',
  '#list_type' => 'ul',
  '#items' => $my_items,
  '#attributes' => ['class' => 'some_class'],
  '#attached' => [
    'library' => ['my_module/my_library'],
    'drupalSettings' => [
      'my_library' => [
        'some_variable1' => $value,        // <== Variables passed
        'another_variable' => $take_this,  // <== 
      ],
    ],
  ],
];

In JavaScript, they can be used as follows:

(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.my_library = {
    attach: function (context, settings) {

      alert(drupalSettings.my_library.some_variable); //alerts the value of PHP's $value

    }
  };
})(jQuery, Drupal, drupalSettings);
1
  • Worth to mention that in the *.libraries.yml there also should be a dependency defined to - core/drupalSettings.
    – leymannx
    May 23, 2018 at 10:10

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.