Drupal 6: Refreshing a view using AJAX and saving your search parameters in a node
This code snippet shows you how to refresh a view using AJAX and form controls, and allows users to save their search parameters as nodes. This tutorial consists of 2 major parts: 1) regenerating a view using arguments; and 2) saving these arguments in a node which can be reloaded at a later point.
1) Create a multiple select taxonomy vocabulary and add some terms to it. For my example, I called the vocabulary “Eric’s Vocab 1” and assigned 5 terms to it: Term 1, Term 2, Term 3, Term 4, Term 5. It will be used to pass term IDs as arguments to the view.
2) Create a view that has a “Taxonomy: Term ID” argument. Make sure you choose “Display all values” for the action to take if argument is not present. Add a validator for Taxonomy term. Choose “Term IDs separated by , or +” for argument type. Enable allow multiple terms per argument and allow multiple arguments to work together. Add view filters and fields as necessary. For my example, I created a view called “eric_ajax_reload”, added filter for published nodes, and added the node title and taxonomy terms as fields.
3) To test my view and argument, I added a bunch of content that had various taxonomy terms assigned to each one. I used the Live Preview functionality at the bottom of the view-edit screen to ensure my view was working with arguments.
4) Create a menu callback to embed the view into a page and bypass the theme layer:
Now if you flush your menu cache, you should be able to get to this new page. At this point, modifying the vocab1 query string value and reloading the page should update your view. If not, make sure your argument is working properly using the Live Preview.
5) Create another page callback that will consist of 2 columns: 1 column that has a form used to update the view, and 1 column that shows the view.
Here is the jQuery I added to get the selected options from the select element, make the AJAX call to regenerate the view, and update the contents of the right column
Here is some CSS to create a simple 2 column layout:
After flushing the menu cache, and going to the new page, you should see a 2 column layout: the left column containing a select element with the taxonomy terms and the right column containing the view. When selecting options in the taxonomy select element, they options should be passed to view as arguments, and the view should be reloaded:
The second part of this tutorial is adding the functionality to save the search as a node. There should be a Save button already on the form that does not do anything. We’ll need to add a submit handler to save the selected options into a node. So, first you’ll need to create a new node type. For my example, I created a node called “saved_search” with a single textarea field called “field_search_parameters”. Here’s the code I added to make the submit button function:
Now when the user clicks on the save button, a node will be created that contains serialized search form data in a field. If you view one of these newly created nodes, you get some unusable serialized data on the screen:
Instead you can add a nodeapi hook to redirect the user back to the menu callback:
For my example I unserialize the data in the node’s field and create a query string based on the data. That way, the $_GET parameters will be passed into the form and the view, acting as a saved search.