Hướng dẫn sử dụng Drupal's own AJAX để làm Dynamically Load Content

With Drupal 7 a new system ajax file is included that allows for easy integration with your own module. This system ajax file can be included with pages, blocks, nodes or other layouts, but requires a menu entry for the callback. This guide will show how to create a module defining two menu entries, a page, and a callback function to return node content when a node link is clicked..

First we define our module in a .info file. Here we name it ajaxify_layout.info and place it in our module folder titled "ajaxify_layout".

name = Ajaxify Layout
description = Provide ajax calls between layouts.
core = 7.x
package = Ajax

Now we define our menu entries for our page listing nodes and our a URL for the ajax callback.

/**
* @file
* Ajax request (Ajax framework).
*/

/**
* Implements hook_menu().
*/
function ajaxify_layout_menu() {
  return array(
    'ajaxify_layout/page' => array(
      'title' => 'Ajax Layout Demo',
      'page callback' => 'ajaxify_layout_page_callback',
      'access callback' => TRUE,
      'type' => MENU_NORMAL_ITEM,
    ),
    'ajaxify_layout/ajax/%' => array(
      'page callback' => 'ajaxify_layout_ajax_callback',
      'access callback' => TRUE,
      'type' => MENU_CALLBACK,
    ),
  );
}

Our custom page below must first include the drupal.ajax file using the drupal_add_library. Then we perform a custom query and output custom node links. Note the use of a custom class named "use-ajax"; this class is selected by drupal.ajax and used to perform a callback on the selected link. Also note how the link "/ajaxify_layout/ajax/%" is the same as the menu entry created above. Instead of writing your own sql you could also embed a view that outputs links with class "use-ajax" along with the proper callback link.

/**
* Ajaxify layout page.
*/
function ajaxify_layout_page_callback() {
  // include system ajax
  drupal_add_library('system', 'drupal.ajax');

  $results = array();
  $query = db_select('node', 'n'); //select your table and alias for the table
  $result = $query->fields('n',array('nid', 'title')) //select your fields
                  ->range(0, 10) //define your range for return
                  ->execute();
  // Loop through results.
  $output = "";
  foreach ($result as $record) {
	// set class="use-ajax" for hte system ajax to select
	// pass the record nid for the callback arg.
	$output .= '' . $record->title . '
';
  }  

  // Provide div for callback, id name defined by ajac_command_html in hook_ajax_callback
  $output .= ''; 
return $output; }

Once a link is clicked the ajax_callback with be routed through the menu entry to your ajaxify_layout_ajax_callback function below. We grab the node nid from the URL using Drupal's arg() function. We then use Drupal's node_load function to obtain the node information using the node id. After printing the node title and body we define the div our ajax_deliver will load within. In this example we define the div id as "#ourajax" using the ajax_command_html function.

/**
* Ajaxify layout callback.
*/
function ajaxify_layout_ajax_callback($type = 'ajax') {
  if ($type == 'ajax') {

    $ajaxnode = node_load(arg(2));
    $output = ''. $ajaxnode->title .'';
    $output .= $ajaxnode->body['und'][0]['safe_value'];

    $commands = array(); // define the div id to return output.
    $commands[] = ajax_command_html('#ourajax', $output);

    $response = array('#type' => 'ajax', '#commands' => $commands);
    ajax_deliver($response);
  }
  // if ajax is not part of the call just load the node.
  else {
    $ajaxnode = node_load(arg(2));
    $output .= ''. $ajaxnode->title .'';
    $output .= $ajaxnode->body['und'][0]['safe_value'];
    return $output;
  }
}