Làm thế nào để thêm xác nhận vào liên kết ajax?

Tôi đang kết xuất ajax link như sau:

l(t('Click here'), 'mypath', array('attributes' => array('id' => 'my-id', 'class' => array('use-ajax'))));

Làm thế nào để hiển thị hộp thoại xác nhận trước khi yêu cầu ajax được gọi?

Tôi làm điều đó như sau trong javascript, như tôi đã tìm thấy trên chủ đề này :

  Drupal.behaviors.module = {
attach: function() {  

 Drupal.ajax['my-id'].beforeSerialize = function () {  

      if(confirm('Are you sure?'))
          return true;
      else
          return false;

  }
 }
}

Khi tôi nhấp vào liên kết, yêu cầu ajax không được gọi nhưng hộp thoại xuất hiện. Không sao. Vấn đề là, sau khi tôi bấm "Hủy" trong hộp thoại xác nhận, yêu cầu Ajax sẽ được gọi sau khi đóng hộp thoại xác nhận.

Ai có thể giúp đỡ, làm thế nào để hộp thoại xác nhận hoạt động?

Tôi không nghĩ rằng đây là cách tốt nhất để giải quyết vấn đề này vì bạn đang nhắn tin trực tiếp với đối tượng Ajax của Drupal.

Cách tốt nhất để làm điều này, về cơ bản là viết trình xử lý nhấp chuột của riêng bạn và tự xử lý xác nhận, sau đó tự kích hoạt một cuộc gọi Drupal AJAX.

Đây là một ví dụ:

l(t('Click here'), 'mypath', array('attributes' => array('id' => 'my-id', 'class' => array('toms-ajax'))));

Trong tệp js của bạn:

(function($) {

Drupal.behaviors.tomsAjaxLinks = {
  attach: function(context, settings) {
    $('.toms-ajax',context).once('toms-ajax').on('click', this.handleAjax);
  },
  handleAjax: function(e) {
    // Cache the anchor link
    var $element = $(this);

    // We need some unique id, either ID of link or create our own
    var nowStamp = new Date().getTime() + Math.floor(Math.random() * (1000 - 0) + 0);
    var base = $element.attr('id') || 'toms-ajax-'+ nowStamp;

    // Change the event type to load, so we can trigger it ourselves
    var drupal_ajax_settings = {
      url : $element.attr('href'),
      event : 'load',
      progress : {
        type: 'throbber',
        message : '',
      }
    };

    // Create the ajax object
    Drupal.ajax[base] = new Drupal.ajax(base, this, drupal_ajax_settings);

    // Your confirmation code e.g. Jquery UI Dialog or something
    // Open dialog
    if(yes) {
      $element.trigger('load');
    } else {
      // Dont trigger ajax
    }
  }
}; 

})(jQuery);

Về cơ bản những gì nó làm là:

1. Đính kèm chức năng handleAjax vào các liên kết ".toms-ajax" của bạn một lần để đảm bảo chúng tôi không đính kèm nhiều trình xử lý sự kiện
2. Khi nhấp chuột, hàm handleAjax được gọi
3. Một đối tượng Drupal Ajax tương ứng được tạo bằng ID duy nhất của chính nó. Nó được gắn vào liên kết và được kích hoạt trên sự kiện 'tải'. Sau đó, bạn xử lý hộp xác nhận.
4. Nếu hộp xác nhận xác nhận ajaxcall, chúng ta chỉ cần kích hoạt sự kiện 'tải' trên đối tượng liên kết và do đó làm cho đối tượng AJAX Drupal thực hiện điều đó.

Dựa trên câu trả lời @jnpWebDeveloper, nhưng với một số thay đổi:

• Hỗ trợ để đính kèm lại các sự kiện vào nội dung được tải thông qua ajax.
• Hỗ trợ tin nhắn tùy chỉnh từ datathuộc tính của thành phần.
• Mã đã sẵn sàng sản xuất (không cần thay đổi bất kỳ biến nào, v.v.).

ajax-confirm-link.js

/**
 * @file
 * Handling of AJAX links with a confirmation message.
 *
 * @code
 * <a href="custom/nojs/path" class="use-ajax-confirm">Link with default message</a>
 * <a href="custom/nojs/path" class="use-ajax-confirm" data-use-ajax-confirm-message="Please confirm your action">Link with custom message</a>
 * @endcode
 */

/*global jQuery, Drupal*/

(function ($) {
  'use strict';
  Drupal.behaviors.ajaxConfirmLink = {
    attach: function (context, settings) {
      $('.use-ajax-confirm').filter('a').once('use-ajax-confirm').on('click', function (event) {
        var $this = $(this);
        // Allow to provide confirmation message in
        // data-use-ajax-confirm-message element attribute.
        var message = $this.data('use-ajax-confirm-message') || Drupal.t('Are you sure you want to do this?');

        if (confirm(message)) {
          // Create ajax event only if action was confirmed.
          var id = $this.attr('id');
          // Generate unique id, if the element does not already have one.
          if (!id || id.trim() == '') {
            id = 'use-ajax-confirm' + new Date().getTime() + Math.floor(Math.random() * 1000);
            $this.attr('id', id);
          }

          Drupal.ajax[id] = new Drupal.ajax(id, this, {
            // 'nojs' to 'ajax' replacement in path performed by Drupal.ajax().
            url: $this.attr('href'),
            event: 'load.use-ajax-confirm'
          });

          $this.trigger('load.use-ajax-confirm');
        }

        return false;
      });
    }
  };
}(jQuery));

Nếu bạn kiểm tra tệp "ajax.js" của Drupal, quá trình liên kết là một trường hợp đặc biệt.

Nhận xét về "Drupal.ajax.prototype.b BeforeSerialize" nói rằng chức năng đó sẽ không bao giờ được gọi nếu nó không phải là một hình thức.

Trong trường hợp đó, "Options.b BeforeSerialize" được sử dụng trước lệnh gọi ajax của jQuery. Vì vậy, nếu bạn thực hiện xác nhận của mình tại đây, bạn có thể nhấp vào ok hoặc hủy, cuộc gọi ajax sẽ luôn được kích hoạt.

Nhưng nếu bạn quá tải chức năng "Options.b BeforeSend", có thể hộp xác nhận của bạn sẽ hoạt động vì nếu hàm đó trả về sai, cuộc gọi Ajax bị hủy (jQuery Doc: http://api.jquery.com/jQuery.ajax/ ).

Đây là đoạn mã được sử dụng trong tệp "ajax.js"

beforeSend: function (xmlhttprequest, options) {
  ajax.ajaxing = true;
  return ajax.beforeSend(xmlhttprequest, options);
}

Phiên bản cập nhật, bạn có thể dùng thử:

Drupal.ajax['my-id'].beforeSend: function (xmlhttprequest, options) {
  if(confirm('Are you sure?')){
      ajax.ajaxing = true;
      return ajax.beforeSend(xmlhttprequest, options);
  }
  return false;
}

Tôi không có thời gian để kiểm tra đoạn trích này, các bản nâng cấp và nhận xét đều được chào đón :)