JavaScriptでajaxダイアログを開く

Question

use-ajaxリンクに追加することで、ドキュメントに従ってDrupalajaxライブラリを使用してモーダルを開くことができます。

例えば

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

これは、ajaxライブラリを使用してnode / 1をフェッチし、それをモーダルで表示します。

JavaScriptを使用してモーダルを開くことができるJavaScript用のDialogAPIもあります。

例えば

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

このAPIの問題は、既存のDOM要素を渡す必要があることです。

私の質問は、JavaScriptでモーダルを開くトリガーをトリガーし、内部のDrupal ajaxライブラリを利用して実際にコンテンツをフェッチできるかどうかです。

たとえば、私はこのようなことをすることができますか？

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

最初のコードブロックに従ってhtmlリンクを作成し、cssで非表示にしてから、JSでクリックをトリガーすることもできますが、これは少しハッキーなようです。純粋なJSを使用してこのアクションをトリガーする方法が必要です。

Answer 1

カスタムJavaScriptでAjaxをトリガーできます。JavaScriptイベントから既存の非フォームAjaxをトリガーする方法を参照してください

あなたの場合、Ajaxダイアログ：

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