Abra a caixa de diálogo Ajax com JavaScript

Question

Adicionando use-ajaxa um link, podemos abrir um modal usando a biblioteca Drupal ajax de acordo com os documentos .

Por exemplo

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

Isso usará a biblioteca ajax para buscar node / 1 e então exibi-lo em um modal.

Também existe uma API Dialog para JavaScript que permite abrir modais usando JavaScript.

Por exemplo

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

O problema com esta API é que você precisa passar um elemento DOM existente.

Minha pergunta é se posso acionar a abertura de um modal com JavaScript e utilizar a biblioteca Drupal ajax interna para realmente buscar o conteúdo?

Por exemplo, posso fazer algo assim?

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

Eu poderia simplesmente criar um link html de acordo com meu primeiro bloco de código, ocultá-lo com css e, em seguida, acionar um clique nele com JS, mas isso parece um pouco hackeado - deve haver uma maneira de acionar essa ação usando JS puro.

Answer 1

Você pode acionar Ajax em javascript personalizado. Veja Como Acionar Ajax Existente, Não Formulário de Evento JavaScript

No seu caso, uma caixa de diálogo Ajax:

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