Как сделать, чтобы команда ctools_modal_command_dismiss срабатывала через несколько секунд

Сегодня я покажу, что нужно сделать, чтобы модальное окно закрывалось с задержкой. Для этого мы напишем небольшой модуль, в котором создадим новую AJAX команду, которая будет использоваться вместо ctools_modal_command_dismiss().

Шаг 1. Создаем в своем модуле файл *.js и в нем создаем новую команду, у меня она будет называться example_modal_dismiss:

(function ($) {

  /**
   * Command to dismiss the modal.
   */
  Drupal.ajax.prototype.commands.example_modal_dismiss = function(ajax, response, status) {
    setTimeout(function () {
      Drupal.CTools.Modal.dismiss();
      $('link.ctools-temporary-css').remove();
    }, response.delay);
  }
})(jQuery);

Шаг 2.В файле *.module создаем команду:

/**
 * Creates a Drupal Ajax 'example_modal_dismiss' command.
 *
 * This command is implemented by
 * Drupal.ajax.prototype.commands.example_modal_dismiss().
 *
 * @param int $delay
 *   The delay before closing the window in milliseconds.
 *
 * @return array
 *   An array suitable for use with the ajax_render() function.
 */
function example_ctools_modal_command_dismiss($delay = 0) {
  return array(
    'command' => 'example_modal_dismiss',
    'delay' => $delay,
  );
}

Пример использования:

if (!empty($form_state['executed'])) {
  ctools_add_js('ajax', 'example');
  $commands = array();
  $commands[] = example_ctools_modal_command_dismiss(3000);
}
return array('#type' => 'ajax', '#commands' => $commands);

P.S. Не забываем подключать js, в котором создана команда перед использованием.

Комментарии (6)

Аватар пользователя Александр
Александр

Доброго времени суток, спасибо за ответ. Недавно стал разбирать API drupal, и пока ни как не могу разобраться почему не работает. В файле ajax_forms.module

<?php

function ajax_forms_menu() {
  $items = array();
  $items['ajax_forms_ajax'] = array(
    'page callback' => 'ajax_forms_ajax_callback',
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
    'delivery callback' => 'ajax_deliver',
    'theme callback' => 'ajax_base_page_theme',
  );
  return $items;
}

function ajax_forms_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'webform_client_form_135') {
    $form['messages'] = array(
      '#markup' => '<div id="ajax-forms-messages"></div>',
      '#weight' => -50,
    );

    $form['#process'][] = 'reviews_form_process';
    $form['actions']['submit']['#ajax'] = array(
      'path' => 'ajax_forms_ajax',
    );
  }
}

/**/
function reviews_form_process($form) {
  module_load_include('pages.inc', 'node');
  return $form;
}

function ajax_forms_ctools_modal_command_dismiss($delay = 0) {
  return array(
    'command' => 'ajax_forms_modal_dismiss',
    'delay' => $delay,
  );
}

function ajax_forms_ajax_callback() {
  list($form, $form_state) = ajax_get_form();
  drupal_process_form($form['#form_id'], $form, $form_state);

  if (!empty($form_state['executed'])) {
    ctools_add_js('ajax', 'ajax_forms');

    drupal_add_js(drupal_get_path('module', 'ajax_forms') . 'ajax_forms.js');

    $commands = array();

    $commands[] = ajax_command_html('#ajax-forms-messages', '<div class="alert fade in alert-block alert-success"><a class="close" href="#" data-dismiss="alert">×</a><div class=" raw "><h2 class="element-invisible">Статус</h2>Ваше сообщение отправлено наш менеджер свяжется с вами.</div></div>');     

    $commands[] = ajax_forms_ctools_modal_command_dismiss(3000);
  }

  return array('#type' => 'ajax', '#commands' => $commands);
}

Ссылку вывожу

<a class="ctools-use-modal ctools-modal-modal-popup-medium" href="/modal_forms/nojs/webform/135">Link to click</a>

В  ajax_forms.js

(function ($) {
 
  /**
   * Command to dismiss the modal.
   */
  Drupal.ajax.prototype.commands.ajax_forms_modal_dismiss = function(ajax, response, status) {
    setTimeout(function () {
      Drupal.CTools.Modal.dismiss();
      $('link.ctools-temporary-css').remove();
    }, response.delay);
  }
})(jQuery);

js не цепляется и селектора 'link.ctools-temporary-css' нет

НЕ подскажите в чём пожет быть проблема.

Аватар пользователя Benya
Benya

Вы не правильно подключаете js:

  1. ctools_add_js('ajax', 'ajax_forms'); - это вы видимо просто поменяли, что бы выглядело как в уроке, смотрите подробнее эту функцию, первым параметром передается название файла без расширения, вторым параметром название модуля, кроме того, файл должен лежать в директории js внутри модуля;
  2. drupal_add_js(drupal_get_path('module', 'ajax_forms') . 'ajax_forms.js'); - перед ajax_forms.js должен быть еще /.

В итоге, у вас должно быть только одно подключение файла или первым способом или вторым.

Аватар пользователя Александр
Александр

Большое спасибо !!!!

Аватар пользователя Валерий
Валерий

Хороший урок! Спасибо!

Аватар пользователя Денис
Денис

Приветствую! Спасибо за интересную статью.
У меня вопрос. Сделал так, как описано в статье Как вывести webform в попапе, и добавил функции из этой. Окно вэбформы закрывается, но после перезагрузки страницы появляется сообщение:

Notice: Undefined property: stdClass::$is_draft in webform_client_form() (line 2437 of /home/w/webrote/public_html/sites/all/modules/webform/webform.module). Notice: Undefined property: stdClass::$is_draft in webform_client_form() (line 2534 of /home/w/webrote/public_html/sites/all/modules/webform/webform.module).

Не совсем понятно, что ему нужно. Галочка Show "Save draft" button в настройках формы отключена. Что может быть не так?

Аватар пользователя Benya
Benya

Возможно вы пробовали на более новой версии модуля и там что то поменялось.