This tutorial has certainly gave me light about Ajax and Drupal, too bad I'm still confused, I guess I'll just keep on reading more of your articles.

I keep getting the response on a new page, i.e. the menu link that calls drupal function e.g. http://example.com/cities/get/22 and the contents like this
{ "cities": "\x3cul\x3e\x3cli\x3e\x3ca href=\"/retail/get/26\" class=\"categoryCity\" title=\"Chicago\"\x3eChicago\x3c/a\x3e\x3c/li\x3e\x3cli\x3e\x3ca href=\"/retail/get/24\" class=\"categoryCity\" title=\"New York\"\x3eNew York\x3c/a\x3e\x3c/li\x3e\x3cli\x3e\x3ca href=\"/retail/get/25\" class=\"categoryCity\" title=\"Dallas\"\x3eDallas\x3c/a\x3e\x3c/li\x3e\x3c/ul\x3e" }

So i am a bit confused, my .js file looks like this.

// $Id$
if (Drupal.jsEnabled) {
$(document).ready(function(content) {
$('a.categoryLink:not(.categoryLink-processed)',content).click(function () {
// This function will get exceuted after the ajax request is completed successfully
// var updateCities =
// alert(this.href);
$.ajax({
type: 'POST',
url: $(this).href,
success: function(data) {$('#cityId').html(data.cities);}, // 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');
});
}

fantastic. googled in despair and this article came through.
Thank you

Great post first off.

I'm wondering why in hook_menu your not implementing 'page arguments' =>array(2), on the MENU_CALLBACK you setup? I see that it works without it, but should that be there following drupal standards?

BTW, hundreds of teachers will be benefiting from this write up you did, it gave me the jumpstart i needed for my module.

I made a module as your instruction, .module .info .js, MENU_CALLBACK,
and drupal_json something in my callback function,but when I clicked the page link to the page callback address ,it always said "page not found"...
any suggestion.?

thank you for this great tutorial
really it helps me a lot

Excellent tutorial! I wanted to be able to do this in Drupal 5 and this gave me a great start in understanding the process. Thought I would share my changes that allow this to be done under Drupal 5.

One thing to note is that I had to update jQuery as the default version that comes with Drupal 5 doesn't handle $.ajax (see http://drupal.org/project/jquery_update).

Here are my changes...

dynamic_products.info:


; $Id$
name = "Dynamic Products"
description = "Returns a list of products according to category."
package = Example Ajax Modules


dynamic_products.modules:


<?php
function dynamic_products_menu() {

$items = array();

$items[] = array(
'path' => 'products/get',
'title' => 'Dynamic Products',
'callback' => 'dynamic_products_get_by_category_id',
'access' => user_access('access dynamic_products content'),
'type' => MENU_CALLBACK
);

return $items;
}

function dynamic_products_perm() {
return array('access dynamic_products content');
}

function dynamic_products_get_by_category_id($cat_id){
$items = '';
switch($cat_id){
case 12:
$items = '

• Product 1
• Product 2

';
break;
case 20:
$items = '

• Product 3
• Product 4

';
break;
}
// create a JSON object. The object will contain a property named “products” that will be set with the $items variable.
print drupal_to_js(array('products'=>$items));
exit();
}

function dynamic_products_theme() {
return array(
'dynamic_products_javascript' => array(
'arguments' => array(),
),
);
}

function dynamic_products_init() {
theme('dynamic_products_javascript');
}

function theme_dynamic_products_javascript() {
drupal_add_js(drupal_get_path('module', 'dynamic_products') . '/dynamic_products.js');
}

dynamic_products.js


// $Id$

if (Drupal.jsEnabled) {
$(document).ready(function(content) {
$('a.categoryLink:not(.categoryLink-processed)').click(function (content) {
// This function will get exceuted 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 products 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 be handle the ajax request. This is the url defined in the 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');
});
}

great tutorial- very useful.
for anyone looking for learning pro-drupal-development book has a similar style

I've been banging my head against a virtual wall for days now, reading,searching,reading but your example has put it all into to place for me. You've opened a very interesting door for me.

thanks a million.
A.

ps quotes and some extra spaces in the html threw me for a while, the following got it working for me.

Cat. 1
Cat. 2

Fantastic, this is just what I need. But would you be so kind as to write a tutorial for updating a cck field as well? :D

Thanks!