web-dev-qa-db-fra.com

Comment passer des variables PHP à Javascript / jQuery?

J'ai trouvé cette façon d'envoyer des variables de PHP vers Javascript.

À l'intérieur de template.tpl.php fichier, j'ai le code suivant.

<?php 
  echo '<div class="drupal-vars" style="display:none;">'.json_encode($variables).'</div>';
?>

Dans Javascript, j'ai le code suivant:

(function ($) {
  $(document).ready(function() { 
      var variables = jQuery.parseJSON($('.drupal-vars').html()); 
      //Remove if youwant to clean the code.
      $('.drupal-vars').remove();
  });

}(jQuery));

J'en ai trouvé un autre solution , mais c'est plus compliqué, bien qu'il puisse être mieux architecturé.

  1. Y a-t-il une meilleure façon de le faire?
  2. Quelle est la laideur de ce que je fais ici?

Le tutoriel se présente comme:

Je vais commencer par créer une implémentation hook_menu () pour établir un rappel de page:

<?php
function helper_menu() {

  $items = array();

  $items['js-vars'] = array(
    'title' => t('Javascript Variables'),
    'description' => t('Javascript Variables'),
    'page callback' => 'helper_page_callback_js_vars',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,    
  );

  return $items;

}
?>

Ensuite, je définirai le rappel de la page:

<?php
function helper_page_callback_js_vars() {

  // include module javascript file
  drupal_add_js(drupal_get_path('module','helper') . '/js/helper.js');

  // define variables you'd like to pass to the DOM
  $js_vars = array(
    'js_vars' => array(
      'message' => t('Hello @username', array('@username' => $GLOBALS['user']->name)),
      'an_array' => array(
        'color' => t('red'),
        'name' => t('Eric'),
      ),
    ),
  );

  // pass variables to javascript
  drupal_add_js($js_vars, 'setting');

  // generate some page output
  return "TEST";

}
?>

Et voici le contenu du fichier include javascript que j'ai coincé dans le répertoire de mon module:

$(document).ready(function(){

  // debug variables directly in FireBug
  console.debug(Drupal.settings.js_vars);

  // popup mesage passed from Drupal
  alert(Drupal.settings.js_vars.message);

});
javascript
7
Xavi Colomer

Vous feriez mieux d'utiliser drupal_add_js() pour passer votre objet dans l'objet JS Drupal.settings:

// In PHP:
drupal_add_js(array('myModule' => array('variables' => $variables)), 'setting');

// In JS
var variables = Drupal.settings.myModule.variables;

Drupal gère toutes les conversions d'objets/tableaux en interne et c'est juste une façon beaucoup plus propre de le faire ... pour le moment, vous incluez du JSON brut dans la sortie de la page, ce qui n'est pas génial en termes de sémantique; gardez également à l'esprit que les moteurs de recherche vont récupérer ce texte même si vous le cachez pour les utilisateurs avec javascript.

Je recommanderais également de séparer cette logique du fichier de modèle lui-même et de le placer dans une fonction template_preprocess_ Dans le fichier template.php De votre thème ... encore une fois, c'est juste plus propre. par exemple.

function MYTHEME_preprocess_html(&$vars) {
  $variables = $your_variables;
  drupal_add_js(array('myModule' => array('variables' => $variables)), 'setting');
}

Jetez un oeil sur le lien vers la fonction drupal_add_js(), il y a beaucoup d'options et vous les trouverez probablement très utiles.

16
Clive

De plus, dans d'autres cas, vous pouvez utiliser la fonction drupal_to_js . Il convertit une variable PHP en son équivalent Javascript.

<?php
  $php_settings = array(
    'key1' => 'value1',
    'key2' => 'value2',
  );
?>
<script type="text/javascript">
  var phpSettings = <?php echo drupal_to_js($php_settings); ?>
</script>
1
Jekis

un exemple sur la façon de convertir des données de nœud en un objet js:

dans template.php

function mythemename_preprocess_node(&$variables){  
     drupal_add_js(array('node' => $variables['node']), 'setting');
}

dans la page.tpl.php

  var node = Drupal.settings.node; 
 // console.log(node);
1
Matoeil