How To: Views to Javascript

The views module for drupal provides a powerful way to create queries of content and then present it in a number of different ways. One of the ways I've seen seldom used is views generating lists and variables for javascript and jQuery. Let's take a look at how we can accomplish this fairly easily.

At the heart of making this happens is theme override functions and drupal_to_js, a function that converts php variables into javascript variables.

To find your views theme override function you can install the Views Theme Wizard module that comes with views. Using the views theme wizard you should be able to get a function like:

<?php
function phptemplate_views_view_list_My_Example($view, $nodes, $type) {
 
$fields = _views_get_fields();

 
$taken = array();

 
// Set up the fields in nicely named chunks.
 
foreach ($view->field as $id => $field) {
   
$field_name = $field['field'];
    if (isset(
$taken[$field_name])) {
     
$field_name = $field['queryname'];
    }
   
$taken[$field_name] = true;
   
$field_names[$id] = $field_name;
  }

 
// Set up some variables that won't change.
 
$base_vars = array(
   
'view' => $view,
   
'view_type' => $type,
  );

  foreach (
$nodes as $i => $node) {
   
$vars = $base_vars;
   
$vars['node'] = $node;
   
$vars['count'] = $i;
   
$vars['stripe'] = $i % 2 ? 'even' : 'odd';
    foreach (
$view->field as $id => $field) {
     
$name = $field_names[$id];
     
$vars[$name] = views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $node, $view);
      if (isset(
$field['label'])) {
       
$vars[$name . '_label'] = $field['label'];
      }
    }
   
$items[] = _phptemplate_callback('views-list-My_Example', $vars);
  }
  if (
$items) {
    return
theme('item_list', $items);
  }
}
?>

This function goes in your template.php file, as the wizard will tell you, and is the place where we start.

There are a few things we can change here to manipulate our information for javascript. The first is the line:

<?php
  $items
[] = _phptemplate_callback('views-list-My_Example', $vars);
?>

This line is taking each node found by views with the accompanying fields, as selected in the view, and passing it to a template file to style the content. In this case the fields on the view are passed to the file views-list-My_Example.tpl.php in your themes folder where you can style it.

You can keep this line the way it is and style the content to pass to your javascript, as I did for the image rotator on MuddyRiverMedia.org, or you can turn the fields into variables in an array to pass to javascript. To turn them into variables to pass to the javascript as an array change the line to read:

<?php
  $items
[] = $vars;
?>

The next part of the equation is to supply the view to javascript in a way the javascript can use it. To do this we alter the line:

<?php
 
return theme('item_list', $items);
?>

There are 2 ways to do this. The first is to create a javascript variable in our theme and the second is to pass it in as a drupal setting for javascript. To create a javascript variable change the line above to:

<?php
 
return drupal_to_js($items);
?>

Then, in the javascript part of your theme you can do something like this:

var myvarname = <?php print theme('views', 'My_Example', NULL, NULL, 'embed'); ?>

Note: This has to be a file generated by PHP and can't be an external javascript file

Another way to add this views generated information is to pass it in as a drupal setting for your javascript. To do this change:

<?php
 
return theme('item_list', $items);
?>

To:

<?php
 
return $items;
?>

Then, in your theme or a module use something like:

<?php
  drupal_add_js
(array('myvarname' = > theme('views', 'My_Example', NULL, NULL, 'embed')), 'setting');
?>

In your javascript this variable would then be accessible at Drupal.settings.myvarname. You'll notice that we didn't use drupal_to_js in this case. That's because drupal does this for us when we use a setting in drupal_add_js.

Views can be a very useful way to pass information to javascript to make our sites even more useful and fun.