I've been working on a module to help overcome some limitations i've found in using views & ajax with the gmap module.
Basically what we've got, is we define a menu item, and then embed the view. The view takes a default argument of all (to return all nodes) or it can be passed a single nid, or a cck term that we do a bit of querying around to get the node id's and pass that off to the view. This all works great.
What i'm looking to do, it replace in example_map relace those first 4 lines (the hyperlinks in the $output var) with a form and check boxes.
[] books
[] movies
[] other options etc.
when a checkbox is clicked, it would submit the form via ajax and the result set would load via ajax underneath the checkboxes. If another checkbox is clicked, it would trigger again and load a new resultset.
My question is, what is the best way to embed these form items (checkboxes) above my views result set. Should i do it completely via jquery, should i use the form api, or is there another method i should be using. Any assistance in getting me past this issue is greatly appreciated.
From example.module
/**
* Implementation of hook_init().
*/
function example_init() {
theme('example_javascript');
}
/**
* Implementation of hook_menu().
*/
function example_Menu() {
$items = array();
$items['maps'] = array(
'title' => 'Find Us',
'description' => 'Use the map to locate our facilities.',
'page callback' => 'example_map',
'access callback' => TRUE,
'type' => MENU_CALLBACK,
);
return $items;
}
function example_map($args = 'all') {
$output = "<ul><li><a class=\"categoryLink\" href=\"maps\">Maps</a></li>";
$output .= "<li><a class=\"categoryLink\" href=\"maps/2\">Maps</a></li>";
$output .= "<li><a class=\"categoryLink\" href=\"maps/books+movies\">Maps</a></li></ul>";
$output .= "<div id=\"divProducts\"></div>";
if ($args == 'all') {
// use the wildcard flag in the view all to return all nodes
$viewName = 'products_by_category'; // The name of the view we are going to load
$displayId = 'default'; // The display id of for the view.
// Call the views_embed_view function to returned themed view output
$output .= views_embed_view($viewName, $displayId, $args);
// embed view with all argument
} else if (is_numeric($args)) {
// a single nid has been passed, so lets pass it to the view
$viewName = 'products_by_category'; // The name of the view we are going to load
$displayId = 'default'; // The display id of for the view.
// Call the views_embed_view function to returned themed view output
$res = views_embed_view($viewName, $displayId, $args);
return drupal_json(array('products'=>$res));
exit;
// embed view with single nid
} else {
$nids = explode(' ', $args);
$placeholders = db_placeholders($nids, 'text');
// Query the database to get the nids that match our needs
$result = db_query("SELECT ctp.nid FROM {content_type_product} ctp WHERE ctp.field_category_value IN ($placeholders)", $nids);
$nid_array = array();
while ($facilities = db_fetch_object($result)) {
// check if already in the array to avoid duplicates
if (!in_array($facilities->nid, $nid_array)) {
$nid_array[] = $facilities->nid;
}
}
// convert the nid_array back into a string and store it
$args = implode('+', $nid_array);
$viewName = 'products_by_category'; // The name of the view we are going to load
$displayId = 'default'; // The display id of for the view.
// Call the views_embed_view function to returned themed view output
$res = views_embed_view($viewName, $displayId, $args);
return drupal_json(array('products'=>$res));
exit;
}
return $output;
}
function theme_example_javascript() {
drupal_add_js(drupal_get_path('module', 'example') . '/example.js');
}
From example.js:
// $Id$
Drupal.behaviors.example = function(context) {
$('a.categoryLink:not(.categoryLink-processed)', context).click(function () {
// This function will get executed after the ajax request is completed successfully
var updateProducts = function(data) {
// The data parameter is a JSON object. The "products" property is the list of product items that was returned from the server response to the ajax request.
$('#divProducts').html(data.products);
}
$.ajax({
type: 'POST',
url: this.href, // Which url should handle the ajax request. This is the url defined in the <a> html tag
success: updateProducts, // The js function that will be called upon success request
dataType: 'json', // define the type of data that is going to get back from the server
data: 'js=1' // pass a key/value pair
});
return false; // return false so the navigation stops here and not continue to the page in the link
}).addClass('categoryLink-processed');
}