Hướng dẫn gọi 1 function sau khi #AJAX event thực hiện (Drupal 7)

Hướng dẫn gọi 1 function sau khi #AJAX event thực hiện (Drupal 7)

Drupal 6

This tutorial is on how to call a JavaScript function after a Drupal 7 #AJAX event. You can view the tutorial on how to call a JavaScript function after a Drupal 6 #AHAH event here: Calling a custom function after an #AHAH event

Introduction

When working with Drupal 7's Form API, I often need to call a JavaScript function after the #AJAX event has fired. This was quite difficult in Drupal 6, but Drupal 7 offers a nice mechanism to do so. In this tutorial, we will be going over a basic example on how to create a JavaScript function that is fired after an #AJAX function has completed. To do so, we will be looking at Drupal's Ajax Commands, and how we can use the system provided callbacks, as well as define our own custom callbacks, to enhance our Drupal forms.

Requirements

To understand this tutorial, you will need a strong understanding of how to build Drupal modules, how the Drupal form API works, how the Drupal #AJAX mechanism works, and how to add JavaScript to pages. I won't be going into a lot of detail on what exactly I am doing with these points as I go along, so without this knowledge you may find it difficult to follow along in some spots.

The setup: Register a path, and build a form

The first thing we need to do is build a form that we can use for the tutorial. So we will register a path allowing us to access the form. In this example, we will be creating a module named after_ajax. First, our hook_menu() implementation:

function after_ajax_menu()
{
	$menu['after_ajax'] = array
	(
		'title' => 'After Ajax example',
		'page callback' => 'drupal_get_form',
		'page arguments' => array('after_ajax_form'),
		'access arguments' => array('access content'),
	);
	return $menu;
}

And next, our form definition:

function after_ajax_form($form, &$form_state)
{
	// First we create a form element with AJAX enabled
	$form['ajax_example'] = array
	(
		'#type' => 'select',
		'#title' => t('Change me'),
		// Note that I am setting the value and the display of the elements to be the same, for convenience sake in our callback function
		'#options' => array(t('Select something') => t('Select something'), t('Something selected') => t('Something selected')),
		'#prefix' => '<div id="after_ajax_element_wrapper">',
		'#suffix' => '</div>',
		'#ajax' => array
		(
			'callback' => 'after_ajax_ajax_callback',
			'event' => 'change',
		),
	);
 
	// Next we add our JavaScript file, named after_ajax.js. This file
	// lives in the /js folder inside our module:
	$form['#attached']['js'] = array
	(
		array
		(
			'type'  => 'file',
			'data' => drupal_get_path('module', 'after_ajax') . '/js/after_ajax.js',
		),
	);
	return $form;
}

So at this point, we have created a menu path at /after_ajax, and a form that has a single select element that will fire an #AJAX event when the select element is changed. We have also added a JavaScript file that will contain our custom functions to be called after the #AJAX event is complete.

The Ajax callback function

The next thing we need to do is create our #AJAX callback that we defined above, after_ajax_ajax_callback():

function after_ajax_ajax_callback($form, &$form_state)
{
	// First, we initialize our $commands array. This array will
	// contain each of the commands we want to fire for our
	// #AJAX callback:
 	$commands = array();
 
	// Next, we create our insert function that will insert our updated content
	// back into the page. To do this, we use the system provided
	// ajax_command_html() function. We pass this function two values:
	// 1) Our AJAX wrapper (that we defined as the #prefix and #suffix of our form element)
	// 2) The rendered HTML that needs to be inserted into the wrapper in the page.
	$commands[] = ajax_command_html('#after_ajax_element_wrapper', render($form['ajax_example']));
 
	// Next, we will use the system provided ajax_command_alert() function as an example to show it's
	// working:
	$commands[] = ajax_command_alert(t('ajax_command_alert() is working'));
 
	// Next we will include a custom function that we will call ourselves in our JavaScript file:
	$commands[] = array
	(
		// The command will be used in our JavaScript file (see next section)
		'command' => 'afterAjaxCallbackExample',
		// We pass the value that the user selected in the select element to our
		// JavaScript function:
		'selectedValue' => $form_state['values']['ajax_example'],
	);
 
	// And finally, we will return all of our commands to the system to be executed:
	return array('#type' => 'ajax', '#commands' => $commands);
}

In the above piece of code, we perform three actions. The first is to insert our HTML into the page - as you will generally do on any AJAX callback. The next is to use one of the system defined ajax_command functions, as an example of how they work, and last we create our own ajax command, to be used in our callback.

The JavaScript

The last thing we need to do is define our custom JavaScript command, afterAjaxCallbackExample, that we used in our Ajax Callback function above. This code is defined in oiur after_ajax.js file that we included in our form definition:

(function($, Drupal)
{
	// Our function name is prototyped as part of the Drupal.ajax namespace, adding to the commands:
	Drupal.ajax.prototype.commands.afterAjaxCallbackExample = function(ajax, response, status)
	{
		// The value we passed in our Ajax callback function will be available inside the
		// response object. Since we defined it as selectedValue in our callback, it will be
		// available in response.selectedValue. Usually we would not use an alert() function
		// as we could use ajax_command_alert() to do it without having to define a custom
		// ajax command, but for the purpose of demonstration, we will use an alert() function
		// here:
		alert(response.selectedValue);
	};
}(jQuery, Drupal));

In the above code, we prototyped the Drupal.ajax.commands object with our custom function, then inside that function we used the value we passed to display the selected value to the user.

And that's that! Now whenever we need to call a function after an #AJAX event, we can either use a pre-defined, system-provided ajax_command function, or we can define our own custom function when no system function exists!

Good luck!

Bạn thấy bài viết này như thế nào?: 
Average: 5 (1 vote)
Ả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

Bình luận (1)

Ảnh của Tommy Tran
Tommy Tran- Aug 10, 2023 03:22 PM Reply

Một công ty mong muốn đưa ra quyết định trên Data cần đội ngũ nhân sự tối thiểu bao nhiêu người và những vị trí gì.

Ngoài BigQuery, Looker có thể tích hợp với các sản phẩm lưu trữ ở Cloud khác hoặc ở on-premise được không? Cách tính phí khi đó như thế nào?

Đối với nghị định 13, GCS sẽ xử lý dữ liệu cá nhân khách hàng như thế nào khi không có Data Center ở Việt Nam? Và có cần thiết phải làm thông báo đến khách hàng dữ liệu của họ đang được lưu trự tài nước ngoài theo đúng quy định không?

Nhờ anh phân tích giúp mình ưu thế của Looker so với các công cụ visualize khác như Power Bi, Tableu... là gì? (Về phân quyền sử dụng Dashboard, chi phí, sự linh hoạt, việc tạo & quản lý các nguồn data.....

Theo em được biết thì looker studio (data studio) và looker (looker pro) là 2 sản phẩm khác nhau. Anh có thể phân biệt sự giống/khác nhau giữa 2 sản phẩm này không ạ (giá cả, performance, tính tiện dụng, ưu/nhược điểm...)

 

Add Comment

Filtered HTML

  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Các thẻ HTML được chấp nhận: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Tự động ngắt dòng và đoạn văn.

Plain text

  • No HTML tags allowed.
  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Tự động ngắt dòng và đoạn văn.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

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

 
Hướng dẫn phân quyền trong Wordpress 3.4

Hướng dẫn phân quyền trong Wordpress 3.4

Wordpress thực sự mạnh mẽ cho cộng đồng bloger chuyên nghiệp, với những ưu điểm riêng biệt làm cho Wordpress ngày càng lớn mạnh và trở nên phổ biến. Bài viết này sẽ giới thiệu về các loại tài khoản dùng để phần quyền trong việc quản lý nội dung trong Wordpress, hiện tại Wordpress có 4 loại tài khoản chính là Admin, Editer, Author, Contributer, và Subsrciber

7 bước để xây dựng Responsive Theme trong Drupal 7

7 bước để xây dựng Responsive Theme trong Drupal 7

Understand your design and decide on the breakpoints.

Hướng dẫn cấu hình Shopify Shopping Cart 2.0 và First Data Global Gateway

Hướng dẫn cấu hình Shopify Shopping Cart 2.0 và First Data Global Gateway

Before configuring your Shopify Shopping Cart, you will need the following information from your First Data Global Gateway e4SM Account.

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

 

Diet con trung