Example: How to Create a 'Jump Menu' from a List View
Last modified: March 17, 2008 - 22:11
With Drupal 5 and jQuery, it's possible to do a view-as-jump-menu form -- allowing a user to choose an item from a select list and then 'jump' to that node. This interaction requires JavaScript be enabled, but this example also degrades nicely -- if the user does not have JavaScript, a 'Go' button is shown and the form still works.
Ingredients:
* One list view that provides node title and node id, optionally sorted in some way (e.g. alphabetically).
* Several functions in your 'template.php' file (below)
* A smidge of CSS (also below)
In the code below, I've capitalized the portions which you should expect to customize (e.g. VIEW_NAME should be the machine name of your view).
template.php
<?php
function phptemplate_views_view_list_VIEW_NAME($view, $nodes, $type) {
$fields = _views_get_fields();
$form = drupal_get_form('view_jumpmenu', $nodes, $view->name, 'CHOOSE AN ITEM');
return $form;
}
function view_jumpmenu($nodes, $view_name, $initial_label) {
// add the jQuery code which hides the 'Go' button and submits the form on change
drupal_add_js ('
$(document).ready(function(){
$("input.edit-submit-jumpmenu").addClass("hidden");
$("#edit-nid-'.$view_name.'").change( function () {
this.form.submit();
});
})
','inline');
$options = array();
$options[0] = $initial_label;
foreach( $nodes as $node ) {
$options[$node->nid] = _filter_url_trim($node->node_title, 35); // Just to trim titles longer than 35 chars
}
$form['#id'] = 'jumpmenu-'.$view_name; // give it a unique name, in case you want to have more than one on a page
$form['#attributes'] = array('class' => 'jumpmenu-form', 'name' => 'jumpmenu-'.$view_name ); // again - for uniqueness and styling
$form['nid-'.$view_name] = array(
'#type' => 'select',
'#options' => $options,
'#id' => 'edit-nid-' . $view_name,
'#class' => 'jumpmenu-item',
);
$form['view_name'] = array( // again - allowing for multiples on a page
'#type' => 'value',
'#value' => $view_name,
);
$form['submit'] = array( // the go button, which will be hidden via jQuery
'#id' => 'edit-submit-jumpmenu-' . $view_name,
'#attributes' => array('class' => 'edit-submit-jumpmenu'),
'#type' => 'submit',
'#value' => t('Go'),
);
return $form;
}
function view_jumpmenu_submit($form_id, $form_values) {
if ( @$form_values['nid-'.$form_values['view_name']] && is_numeric($form_values['nid-'.$form_values['view_name']]) ) {
return 'node/'.$form_values['nid-'.$form_values['view_name']];
}
}
?>CSS
form.jumpmenu-form input.hidden {
display: none;
}
To get two versions of this
To get two versions of this form to work on the same page you'll need to use the hook_forms function. You can see an example of it here: using the same form on the same page.
will this work with D6?
will this work with D6?