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 Tran 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
  • Phone/Zalo: (+84) 944 225 212
  • WhatsApp: (+84) 944 225 212
  • Line Messenger: (+84) 944 225 212
  • Email: asaleotestf@gmail.com
  • Telegram Messenger: https:/t.me/tommytran0401

Quảng cáo việc làm

 

Thích hợp các bạn nữ mảng thợ may làm việc tại nước NGA

Đơn hàng Tuyển dụng 100 Thợ may đi Nga(đợt 1 tháng 3.2021, đợt 2 tháng 5.2021). Lương thực lãnh 800 USD, bao ăn ở, vé máy bay và visa, phí xuất cảnh(1800 USD)trả khi đi làm có lương. Bạn có thể liên hệ CÔNG TY qua Phone/Zalo: (+84) 944 225 212. Công ty sẽ tư vấn cho bạn.

Xem chi tiết: >>> https://bit.ly/3o9NOfR

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

 
Startup công nghệ tỉ đô đầu tiên của châu Phi lên sàn chứng khoán New York

Startup công nghệ tỉ đô đầu tiên của châu Phi lên sàn chứng khoán New York

Theo CNBC, cổ phiếu Jumia Technologies tăng đến hơn 60% trong ngày đầu giao dịch trên Sàn Giao dịch Chứng khoán New York. Giữa ngày giao dịch (giờ Mỹ) cổ phiếu có giá tầm 22 USD, cao hơn mức mở cửa 14,5 USD. Vốn hóa thị trường của Jumia hơn 1 tỉ USD một chút.

Vì sao mạng xã hội Twitter thiếu đất sống tại Việt Nam

Vì sao mạng xã hội Twitter thiếu đất sống tại Việt Nam

Trước đây khi gặp một cô gái xinh, hội bạn chúng tôi thường thách đố nhau xem ai sẽ là

Chính phủ Mỹ "sờ gáy" Facebook vì vấn đề bảo mật

Chính phủ Mỹ sờ gáy Facebook vì vấn đề bảo mật

Facebook đang phải tiến hành những cuộc đàm phán với chính phủ Mỹ về việc sử dụng thông tin cá nhân người dùng trên mạng xã nội này. Theo thông tin nội bộ, chính phủ yêu cầu Facebook phải nhận được sự đồng ý của người sử dụng trước khi hãng thay đổi những điều khoản quan trọng trong chính sách bảo mật. Điều đó có nghĩa việc người dùng cho phép chia sẻ thông tin của mình là một chuyện, việc Facebook sử dụng thông tin đó như thế nào lại là một chuyện khác.

BLOG POSTS