Làm cách nào để kích hoạt chức năng javascript khi cuộc gọi aupax Drupal hoàn tất?

Tôi cần phải làm thêm một số điều sau khi Drupal ajax hoàn thành việc chèn một số thứ vào DOM. Với jQuery, điều này thật đơn giản, nhưng tôi không thể tìm ra cách thực hiện trong Drupal 7: s

Tôi có thêm một cái gì đó vào liên kết ajaxified của tôi không? Tôi đã đọc một cái gì đó về việc đính kèm một hành vi ... sự nhầm lẫn đang diễn ra trong ...

Cuối cùng tôi đã thêm một số lệnh bổ sung vào trang đang được trình xử lý ajax trả về như thế này:

$commands = array();
$commands[] = ajax_command_invoke(NULL, 'grid_content_loading', array('argument1', 'argument2'));
$commands[] = ajax_command_append('#grid-content-target', $html);
$commands[] = ajax_command_invoke(NULL, 'grid_content_loaded', array('argument1', 'argument2'));
$page = array('#type' => 'ajax', '#commands' => $commands);
ajax_deliver($page);

Và về phía khách hàng, tôi đã tạo ra 2 chức năng javascript thông qua jQuery:

(function($) {
$.fn.grid_content_loading = function($argument1, $argument2) {
   ...
};

$.fn.grid_content_loaded = function($argument1, $argument2) {
   ...
};
})(jQuery);

Trong dự án của tôi, tôi đã viết mã JavaScript được xác định rõ, cập nhật số liệu thống kê trang sau cuộc gọi AJAX.

Vì tôi muốn sử dụng lại các hàm mà không đi đến mức "mở rộng jQuery", tôi đã kết thúc với giải pháp sau, sử dụng hàm jQuery hiện có, thay vì xác định một hàm mới. Điều này được lấy cảm hứng từ những gì mô-đun 'cờ' thực hiện - nó chỉ đơn giản là kích hoạt một sự kiện và cho phép nhiều người nghe sự kiện Javascript hành động để phản ứng, trái ngược với việc chỉ có một plugin / tiện ích mở rộng jQuery tùy chỉnh được mã hóa cứng như trong giải pháp khám phá trong các câu trả lời trước.

Trong một mô-đun Drupal:

// in_some_ajax_function()

$commands[] = ajax_command_invoke('html', 'trigger', array('MY_EVENT'));

Trong Javascript:

// Added an event binding to my $(document).ready();

$(document).ready(function(){

  $(document).bind('MY_EVENT', function() {
    alert('MY_EVENT');
  });

});

Tôi đã phải lưu ý rằng tham số đầu tiên cho ajax_command_invoke là KHÔNG BAO GIỜ bất kỳ đối tượng JavaScript gốc nào, vì vậy, sau đây không bao giờ hoạt động, bởi vì nó chuyển thành bộ chọn 'tài liệu' (phần tử):

// This tries to select $('document')
// ... which is nothing, since there are no 'document' elements.

$commands[] = ajax_command_invoke('document', 'trigger', array('MY_EVENT'));

Thật kỳ lạ, ràng buộc $(document)và kích hoạt trên $('html')là tương thích. Tôi cho rằng bạn có thể trở nên rất sáng tạo và liên kết / kích hoạt các yếu tố cụ thể hơn, ở cấp độ sâu hơn. Nếu bạn có thể nghĩ về một kịch bản trong đó làm như vậy có ý nghĩa hơn một trình kích hoạt sự kiện cấp cao nhất, vui lòng bình luận!

Tôi nghĩ rằng tùy chọn tốt nhất là sử dụng ajaxCompletehàm jQuery :

(function($){ 
   $(document).ajaxComplete(function(e, xhr, settings)
   {
     alert(settings.url);
   });
}(jQuery));

Và nếu bạn muốn sử dụng chức năng cho chức năng ajax cụ thể, bạn có thể sử dụng cài đặt đã xác định.url cho trường của mình và thay đổi thành:

(function($) {
    $(document).ajaxComplete(function(e, xhr, settings){ 
    if (settings.url == "the path from step 1") {
        // Code to populate your fields here
    }
 });
}(jQuery));

Điều này làm việc cho tôi cho Drupal 7 và 8.

Mẫu mã:

$commands = array();
$commands[] = array(
    'command' => 'your_js_callback', // the name of your javascript callback
    'value1'  => 'My first value',
    'value2'  => 'My second value',
);
ajax_render($commands);

Mã JS:

(function($, Drupal) {
    Drupal.ajax.prototype.commands.your_js_callback = function(ajax, response, status) {
        alert(response.value1);
        alert(response.value2);
    }
})(jQuery, Drupal);

Giải pháp hack nhanh: Đặt một hình ảnh bên trong nội dung được tải và cung cấp cho nó onload="[javascript function]()"thuộc tính. Không chắc đây thực sự là thứ bạn đang tìm kiếm ... Hoặc nếu điều này dễ hơn cách chính xác ... Nhưng có lẽ tốt hơn không?

Tôi đã đăng một câu trả lời cho câu hỏi này

https://stackoverflow.com/a/19404566/894487

Tôi không chắc về sự khác biệt thực sự giữa việc mở rộng Drupal.ajax.prototype.commandshoặc $.fn

Tôi tưởng tượng cái trước sẽ hiệu quả hơn vì chúng không cần phải vượt qua chức năng của bạn. Không chắc chắn nếu điều đó là quan trọng.

Tôi đã viết một hướng dẫn về cách thực hiện điều này trong Drupal 7: https://www.jaypan.com/tutorial/calling-feft-after-ajax-event-drupal-7