Mở hộp thoại ajax bằng JavaScript

Question

Bằng cách thêm use-ajaxvào một liên kết, chúng ta có thể mở một phương thức sử dụng thư viện ajax Drupal theo tài liệu .

Ví dụ

<a class="use-ajax" 
    data-dialog-options="{&quot;width&quot;:400}" 
    data-dialog-type="modal" 
    href="/node/1">
    First article displayed in modal dialog.
</a>

Điều này sẽ sử dụng thư viện ajax để tìm nạp nút / 1 và sau đó hiển thị nó trong một phương thức.

Ngoài ra còn có API Dialog cho JavaScript cho phép mở các phương thức sử dụng JavaScript.

Ví dụ

var myDialog  = Drupal.dialog(ADOMElement, settings);
myDialog.show();

Vấn đề với API này là bạn cần phải chuyển vào một phần tử DOM hiện có.

Câu hỏi của tôi là tôi có thể kích hoạt mở một phương thức bằng JavaScript và sử dụng thư viện ajax Drupal bên trong để thực sự tìm nạp nội dung không?

Ví dụ: Tôi có thể làm điều gì đó như thế này không?

var myDialog  = Drupal.dialog('/node/1', {useAjax: true});
myDialog.show();

Tôi chỉ có thể tạo một liên kết html theo khối mã đầu tiên của mình, ẩn nó bằng css và sau đó kích hoạt một cú nhấp chuột vào nó bằng JS nhưng điều này có vẻ hơi khó hiểu - phải có cách để kích hoạt hành động này bằng JS thuần túy.

Answer 1

Bạn có thể kích hoạt Ajax trong javascript tùy chỉnh. Xem Cách kích hoạt Ajax Hiện có, Không phải Dạng từ Sự kiện JavaScript

Trong trường hợp của bạn, một hộp thoại Ajax:

var ajaxSettings = {
  url: '/node/1',
  dialogType: 'modal',
  dialog: { width: 400 },
};
var myAjaxObject = Drupal.ajax(ajaxSettings);
myAjaxObject.execute();