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

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;
  }
}
Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy

Tìm kiếm bất động sản

 

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
DroidSecurity phần mềm diệt virus miễn phí cho Android

DroidSecurity phần mềm diệt virus miễn phí cho Android

Trình diệt virus dành riêng cho Android này đã được hơn 4.5 triệu người tin tưởng sử dụng.

Xử lý Ajax events trên entity reference (autocomplete) trong Drupal 8

Xử lý Ajax events trên entity reference (autocomplete) trong Drupal 8

In this short article I will show you something that amazed me when I discovered it. You’ll maybe say: boh, I already knew this from way back or really, that amazed you?

Nước sôi diệt côn trùng mối - diệt mối 2016

Nước sôi diệt côn trùng mối - diệt mối 2016

Nhà tôi đợt này xuất hiện mối, liệu dùng nước sôi đổ vào tổ mối có diệt được chúng không

Công ty diệt chuột T&C

 

Diet con trung