Öffnen Sie den Ajax-Dialog mit JavaScript

Sep 18 2020

Durch Hinzufügen use-ajaxzu einem Link können wir ein Modal mithilfe der Drupal Ajax-Bibliothek gemäß den Dokumenten öffnen .

Z.B

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

Dadurch wird die Ajax-Bibliothek verwendet, um den Knoten / 1 abzurufen und ihn dann modal anzuzeigen.

Es gibt auch eine Dialog-API für JavaScript , mit der Modale mit JavaScript geöffnet werden können.

Z.B

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

Das Problem mit dieser API ist, dass Sie ein vorhandenes DOM-Element übergeben müssen.

Meine Frage ist, kann ich das Öffnen eines Modals mit JavaScript auslösen und die interne Drupal-Ajax-Bibliothek nutzen, um den Inhalt tatsächlich abzurufen?

Kann ich so etwas machen?

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

Ich könnte einfach einen HTML-Link gemäß meinem ersten Codeblock erstellen, ihn mit CSS ausblenden und dann mit JS einen Klick darauf auslösen, aber das scheint ein bisschen hackig zu sein - es muss eine Möglichkeit geben, diese Aktion mit reinem JS auszulösen.

Antworten

2 4k4 Sep 18 2020 at 16:48

Sie können Ajax in benutzerdefiniertem Javascript auslösen. Siehe So lösen Sie vorhandenes, nicht formulares Ajax aus einem JavaScript-Ereignis aus

In Ihrem Fall ein Ajax-Dialog:

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