Show several views with AJAX in Drupal 7

Published on

Jun 28, 2012

SOS

So you've created your views in Drupal. You supposed that they would bring you calmness into peaceful life. And then you get a new request from your customer -- I want these views to be rendered inside tabs, I want them ten or more per page, and I want them to load dynamically. If you're not a stunned Drupal-only developer, but just a normal guy or gal with a pile of development knowledge, you'll probably try to render your view programmatically using views_embed_view() or similar, then return it to the client side, which is after all some jQuery .click() event with a .post(), and you'll hope for the best.

Unfortunately, (and speaking about Fortune, we could rephrase to - pretty predictively), you get the nice-looking rendered view but, the AJAX doesn't work. No pagination, no other event which you have defined. You start analyzing, and get the impression that some .js files are missing.

They are missing because when Drupal renders a page, there's not a single view present (you're loading them with AJAX, remember?). You may try to collect all the javascripts and throw them all in the header just to test, but wait.

There's Hope.

There is a nice module in Drupal, especially made for this purpose. It's called Quicktabs. It's a complex module, and it knows how to render not only Views, but also blocks, nodes and another quicktabs.

So you need to install this module. Create your View, then go to Structure >> Quicktabs, create a new one. As you can see, the interface is simple and minimal, and this is the case that every additional word about it is re-dun-dant. The only thing to notice is the Machine name, near the Title. Write it down, you're going to use this soon.

Inside your module, create a menu, then the hook_theme() etc. Now we're going to render the quicktabs programmatically with the following code:


  $quicktabs = quicktabs_build_quicktabs('the_name_of_my_quicktab_that_i_wrote_down_in_the_previous_step'); 
  $content = render($quicktabs);
  return theme('draw', array( 'content' => $content)) ; // use $content variable in draw.tpl.php template

That's it. Now you can navigate to your website.local/draw or whatever you've defined, and enjoy from dynamically loaded content such as Views, Nodes and what not.

Additional stuff

I'm adding a code for minimal module needed to demonstrate this.

The module:


 'Let\'s draw some tabs!',
      'description' => t('Description'),
      'page callback' => 'my_draw',
      'access arguments' => array('access content'),
      'type' => MENU_CALLBACK
   );

  return $items;
}


function my_draw() {
  $quicktabs = quicktabs_build_quicktabs('the_name_of_my_quicktab_that_i_wrote_down_in_the_previous_step'); 
  $content = render($quicktabs);
  return theme('draw', array( 'content' => $content)) ; // use $content variable in draw.tpl.php template
}


/*
 * Implementation of hook_theme().
 */
function my_theme($existing, $type, $theme, $path){
  return array(
    'draw' => array(
      'variables' => array('content' => NULL),
      'template' => 'draw', // place you file in 'theme' folder of you module folder
      'path' => drupal_get_path('module', 'my') .'/theme/'
    )
  );
}

The .info:


name = My
description = My module.
package = My
core = 7.x
php = 5.2

The template from my_module/theme/:


Let's draw our quicktabs:



Cool, ehh?

Conclusion

We have successfully rendered AJAXified tabs and loaded contents with the power of Drupal. However, if I had to create this or similar things again, as a developer, my better choice would be writing the clean code with Ruby on Rails. Of course, Drupal is the best option when you know what you want and, you know that it's easy to achieve with Drupal and you know which module to use - when, where and how. I hope this article has helped you to solve your problem.