Drupal → Показать результат выполнения AJAX запроса в jQuery UI Dialog

30.11.2011

Пример формы, в которой после нажатия кнопки, юзер увидит jQuery UI Dialog с приветственным сообщением, отправленным из ajax callback-а:

Drupal 8

class ExampleForm extends FormBase {

  ...

  /**
   * {@inheritDoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
    $form['submit'] = [
      '#type' => 'submit',
      '#value' => 'Open dialog',
      '#ajax' => [
        'callback' => '::ajaxSubmit',
      ],
    ];

    $form['#attached']['library'][] = 'core/drupal.dialog.ajax';

    return $form;
  }

  /**
   * Ajax submit callback.
   */
  public function ajaxSubmit(array $form, FormStateInterface $form_state) {
    $response = new AjaxResponse();
    $response->addCommand(new OpenModalDialogCommand('Message', 'Hello, World!'));
    return $response;
  }

}

Drupal 7

/**
 * Form builder.
 */
function mymodule_test_form($form, &$form_state) {
  $form['submit'] = array(
    '#type' => 'button',
    '#value' => 'Open dialog',
    '#ajax' => array('callback' => 'mymodule_test_form_ajax_submit'),
  );

  $form['#attached']['library'][] = array('system', 'ui.dialog');

  return $form;
}

/**
 * Form AJAX submit.
 */
function mymodule_test_form_ajax_submit($form, &$form_state) {
  $commands = array(
    ajax_command_remove('#dialog'),
    ajax_command_append('body', '<div id="dialog" class="element-hidden">Hello world</div>'),
    ajax_command_invoke('#dialog', 'dialog', array(array('modal' => TRUE, 'width' => 'auto'))),
  );
  return array(
    '#type' => 'ajax',
    '#commands' => $commands,
  );
}

Написанное актуально для
Drupal 7, Drupal 8
Похожие записи

Добавить комментарий