¿Cómo enviar variables desde un archivo .php a un archivo .js?

37

Espero que alguien pueda ayudarme. El problema es el siguiente: 1) Tengo un módulo en el que asigno la variable para enviarla al archivo de plantilla php.tpl

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

Esta variable se puede mostrar en el archivo php.tpl como

<?php print $testvar?>

2) He separado el archivo .js ¿Cómo puedo obtener acceso a este archivo .js valioso dentro?

Sé cómo será si el archivo .js está dentro de .php.tpl:

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

El problema es cómo hacer lo mismo si estos dos archivos .js y .php.tpl están separados.

Alexey
fuente
2
no haga eco a ciegas de una variable en Javascript. Si hay metacaracteres de Javascript (comillas simples, especialmente), introducirá errores de sintaxis. Haga lo var myVar = <?php echo json_encode($testvar) ?>;que se encargará de dichos problemas, independientemente del tipo de datos / contenido de PHP var.
Lista de consejos y trucos de Drupal 7 js Browse-tutorials.com/tutorial/javascript-drupal-7
ram4nd

Respuestas:

65

Debe usar drupal_add_js()en su módulo, no hay necesidad de generar la variable en su .tpl.php:

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

Y en su JavaScript, puede acceder al valor en Drupal.settings.YOURMODULE.testvar:

alert(Drupal.settings.YOURMODULE.testvar);

El uso directo de variables globales (como se sugiere en su ejemplo de código) es una práctica desaconsejada en JavaScript, ya que satura el espacio de nombres global . Además, si su código se activa al cargar la página, consulte la sección "Comportamientos" en Administración de JavaScript en la documentación de Drupal 7 (vale la pena leer toda la página).

Pierre Buyle
fuente
17

En su archivo MODULENAME.module use el siguiente código.

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

Y en MODULENAME.js usa el siguiente.

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

})(jQuery);

De esta manera, puede pasar su variable PHP a JavaScript y usarla.

Himanshu Pathak
fuente
¿Qué hace la función y cuándo se activa? ¿Por qué no usar directamente Drupal.settings.YOURMODULE.testvar?
Increíble
5

Para Drupal 8 , drupal_add_js()se eliminó (ya estaba en desuso en Drupal 7) => vea esto para obtener más información .

La forma de enviar información PHP a Javascript se describe perfectamente mediante la respuesta de @ 4k4 a una pregunta similar.

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,  // <== 
      ],
    ],
  ],
];

En JavaScript, se pueden usar de la siguiente manera:

(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);
Florian Müller
fuente
Vale la pena mencionar que en el *.libraries.ymltambién debe haber una dependencia definida para - core/drupalSettings.
leymannx