Update Drupal views argument via AJAX

Question

Hello, I have a request concerning Drupal 6.x I'd like to have this behaviour:

imagine to have 2 columns, on the left a list of nodes (only titles for example) and on the right a view showing just one of the contents on the left. My idea would be to achieve this with an AJAX-fashion: clicking a link in the list on the left updates the view on the right with the actual node.

Which is the best way to handle this?

My idea is to use Panels, make 2 column panel with 2 views, one (left) filtered on content type, with no arguments, and one on the right which takes in as an argument the node id to be displayed.

But how to link the 2 views with AJAX? (or, better, how to update the view on the right with an AJAX call?) is this possible?

Any help or idea is really welcome Thanks!

Cheers Mauro

Answer 1

Hi, this is certainly possible, and not very difficult to do.

Your task can be divided into two main parts:

1. Providing a 'callback' URL in the Backend that takes a node id (nid) and returns the markup to display the node in the right panel in a format that can be processed by javascript. This will be done in PHP within a normal Drupal module. The main point is not to return a full Drupal page as usual, but only the markup for the node.
2. Create logic for the Frontend that, when triggered by clicking a link in the left panel, retrieves the new node markup via the URL callback above and replaces the content of the right panel with it. This needs to be done in javascript, using the Drupal javascript API with jQuery.

You can find an introduction and example for AJAX in Drupal here. (This does almost exactly what you want to do, only with images)

You should also look at this more general entry point for JavaScript in Drupal.

Answer 2

You also can do a quick hack, which is quite flexible, because it allows you to change your views without changing code.

I have had a similar task recently and for your task I would do the following:

1. for your right column, create a exposed filter (node id) and hide whole exposed filter form using CSS.
2. using jQuery, attach a click behavior to titles on your left column.
3. the click behavior takes the node id, finds the attached exposed filter at the right column, enters the node id into the input field and executes form's .submit().

the .submit() triggers the build-into-views well debugged ajax request which refreshes your right column.

Answer 3

You can find this tutorial I published helpfull: http://www.viziontech.co.il/tutorial2

Answer 4

Does anyone know hw to actually attach that kind of click behavior to a link?