36

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?

migrated from stackoverflow.com Jun 1 '11 at 14:07

This question came from our site for professional and enthusiast programmers.

  • 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 '11 at 14:17
  • List of Drupal 7 js tips and tricks browse-tutorials.com/tutorial/javascript-drupal-7 – ram4nd Sep 7 '17 at 10:33
64

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

17

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.

  • What does the function do and when is it triggered? Why not to use directly Drupal.settings.YOURMODULE.testvar? – Incredible May 4 '17 at 7:40
3

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);
  • Worth to mention that in the *.libraries.yml there also should be a dependency defined to - core/drupalSettings. – leymannx May 23 '18 at 10:10

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.