Drupal 7 Module Development

JavaScript in Drupal
The page callback where the link lives, starts by using drupal_add_js() to add
misc/ajax.js. This JavaScript does the work to automatically make the AJAX
work. This is followed by a link with a callback to hello_world_link_callback/
nojs/. The first part of this link is the callback where the AJAX request is handled.
The /nojs/ at the end is special. When JavaScript is not available it is passed to the
response function so it knows it was called to be a full page load. When JavaScript
is available it is replaced with /ajax/. This is passed into the callback function so it
knows it was called via an AJAX request.
What makes this link become an AJAX link is the class being added with the name
use-ajax. The JavaScript file we added at the beginning, ajax.js, looks for links
with this class and converts them into AJAX.
function hello_world_link_response($type = 'ajax') {
if ($type == 'ajax') {
$output = t("Hello World!");
$commands = array();
$commands[] = ajax_command_append('#saying-hello', $output);
$page = array('#type' => 'ajax_commands', '#ajax_commands' =>
$commands);
ajax_deliver($page);
}
else {
return t("Hello World in a new page.");
}
}
When the callback to handle the request is called, the type of action is passed in.
When no JavaScript is available, nojs is passed in. When the request is AJAX, ajax
is passed in. This can be used in the callback functions logic to properly respond
to each case.
In this case we use an if statement. When the request is AJAX, we respond in one
way and when JavaScript is not available we respond differently.
When the request is an AJAX callback we start by creating the response text of "Hello
World!". This is followed by creating an array to hold commands we want Drupal
to execute and adding a command to it.
A command is an action we want the JavaScript to perform when it receives the
AJAX response. The commands provide ways in which jQuery can manipulate the
content of the page with the responded data. In this case the command used is the
ajax_command_append(). This command accepts a jQuery selector and content.
The content is appended to the selector. This Drupal function utilizes the
jQuery.append() function.
[ 308 ]