How to pass PHP variables to Javascript/jQuery? I found this way to send variables from PHP to Javascript.

Inside the template.tpl.php file, I have the following code.

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


Within Javascript, I have the following code:

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

}(jQuery));


I found another solution, but it's more complicated, although it may be better architectured.


Is there a better way to do it?
How ugly is what I am doing here?




The tutorial goes like:


  I'll start by creating a hook_menu() implementation to establish a
  page callback:

&lt;?php
function helper_menu() {

  $items = array();

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

  return $items;

}
?&gt;

  
  Next, I'll define the page callback:

&lt;?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' =&gt; array(
      'message' =&gt; t('Hello @username', array('@username' =&gt; $GLOBALS['user']-&gt;name)),
      'an_array' =&gt; array(
        'color' =&gt; t('red'),
        'name' =&gt; t('Eric'),
      ),
    ),
  );

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

  // generate some page output
  return "TEST";

}
?&gt;

  
  And here is the contents of the javascript include file I stuck in my
  module directory:

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

});
You'd be better off using drupal_add_js() to pass your object in the JS Drupal.settings object:

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

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


Drupal handles all the conversions of objects/arrays internally and this is just a much cleaner way of doing it...at the moment you're including raw JSON as part of the page output which isn't great in terms of semantics; also bear in mind that search engines will pick up this text even though you're hiding it for users with javascript.

I'd also recommend separating this logic out from the template file itself and put it in a template_preprocess_ function in your theme's template.php file...again it's just cleaner. e.g.

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


Have a look at the link to the drupal_add_js() function, there are quite a lot of options and you'll probably find them quite useful.