Buka dialog ajax dengan JavaScript

Sep 18 2020

Dengan menambahkan use-ajaxke tautan, kita dapat membuka modal menggunakan pustaka ajax Drupal sesuai dokumen .

Misalnya

<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>

Ini akan menggunakan pustaka ajax untuk mengambil node / 1 dan kemudian menampilkannya dalam sebuah modal.

Ada juga API Dialog untuk JavaScript yang memungkinkan pembukaan modal menggunakan JavaScript.

Misalnya

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

Masalah dengan API ini adalah Anda harus memasukkan elemen DOM yang sudah ada.

Pertanyaan saya adalah dapatkah saya memicu pembukaan modal dengan JavaScript dan menggunakan pustaka ajax Drupal internal untuk benar-benar mengambil konten?

Misalnya Bisakah saya melakukan sesuatu seperti ini?

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

Saya bisa saja membuat tautan html sesuai blok kode pertama saya, menyembunyikannya dengan css, dan kemudian memicu klik di atasnya dengan JS tetapi ini tampaknya agak hacky - harus ada cara untuk memicu tindakan ini menggunakan JS murni.

Jawaban

2 4k4 Sep 18 2020 at 16:48

Anda dapat memicu Ajax di javascript khusus. Lihat Cara Memicu Ajax Non-Formulir yang Ada dari Peristiwa JavaScript

Dalam kasus Anda, dialog Ajax:

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