Drupal → Модуль Auto-Dialog — показываем контент и формы в jQuery диалоге

19.04.2014

Выложил свой модуль Auto-Dialog в котором попытался воспроизвести в Drupal 7 диалоговую систему из Drupal 8. Модуль позволяет открывать любые страницы в jQuery диалоге.

Использование очень простое — достаточно включить модуль и добавить на страницу ссылку с классом autodialog:

<a href="/contact" class="autodialog">Обратная связь</a>

Результат клика по такой ссылке:

Модуль поддерживает пользовательские настройки диалога, которые должны указываться в атрибутах data-dialog-{option-name}. Например:

<a href="/contact" class="autodialog" data-dialog-width="500">Диалог шириной 500 пикселей</a>
<a href="/contact" class="autodialog" data-dialog-title="Feedback">Диалог с заголовком "Feedback"</a>

Так же модуль умеет AJAX-ифицировать открываемые формы с помощью Asaf. Для этого нужно добавить ссылке атрибут data-dialog-ajax="true" (сам Asaf при этом настраивать не нужно):

<a href="/contact" class="autodialog" data-dialog-ajax="true">Обратная связь</a>

Некоторые формы после сабмита перезагружают страницу или делают редирект. Чтобы этого не происходило и диалог не закрывался, нужно добавить ссылке атрибут data-dialog-ajax-disable-redirect="true":

<a href="/contact" class="autodialog" data-dialog-ajax="true" data-dialog-ajax-disable-redirect="true">Обратная связь</a>

Видео:

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

Комментарии

Евгений
13.05.2014, 12:59

А вот скажите мне:
1) Почему оверлей идет после самого окна (это неправильно + не всегда работает в IE, мать его)
2) В данном модуле не предусмотрена возможность сделать окна НЕмодальными?

Евгений
13.05.2014, 13:06

data-dialog-modal="0"

Странно, а почему не true/false, как в документации? :)

Евгений
13.05.2014, 13:08

кстати, всё равно не работает. Перекрывается всё содержимое. Можно, конечно, просто display:none оверлею и гуд, но как-то не странно решается вопрос.

Евгений
26.05.2014, 18:56

Очень странная фигня происходит. При первом клике содержимое в окошке открывается, при последующих -- ничего не происходит, совсем ничего.

Помогите разобраться, мне нужно в диологовом окне получить только форму, без лишних полей типа body, как это можно сделать ?
Сделал свой колбек где возвращаю render($content['webform']), на странице все нормально, а в диалоговом окне пусто.
Использую master ветку модуля.

Так preprocess_node скроет везде, Мне нужно что бы на странице выводились все поля, а в диалоге только форма. И вообще как сделать свой колбек, на который можно будет сделать ссылку?
Если можно развернутый ответ, для особо сутулых)

проверяйте что это запрос от модуля autodialog - _autodialog_check_request()

Спасибо понял, все работает.
А если нужно выводить свой кастомный колбек, ну к примеру, сделать быстрый просмотр товара, выводим ссылку с href="/quick_view/%nid", а она возвращает нам в диалоговом окне, свой кастомный шаблон отображения.
Извиняюсь за такое количество вопросов, просто захотел уже нормально разобраться.

Формы и материалы открывает, а вьюхи - нет. Так и должно быть?

А если нужно выводить свой кастомный колбек, ну к примеру, сделать быстрый просмотр товара, выводим ссылку с href="/quick_view/%nid", а она возвращает нам в диалоговом окне, свой

https://api.drupal.org/api/drupal/modules%21system%21system.api.php/fun…

Формы и материалы открывает, а вьюхи - нет. Так и должно быть?

у меня работает

В функции autodialog_deliver($page_callback_result):
'content' => drupal_render($page_callback_result),
и модальное окно не выводит вьюхи и кастомный колбек, хотя в $page_callback_result есть html, но если сделать просто render($page_callback_result) то тогда все работает нормально.
Это в мастер ветке.

Гость
28.06.2014, 08:35

с шаблонами bootstrap не хочет работать, с чем это связано?

Гость
13.07.2014, 17:39

C Bootstrap 3 по одной ссылке открывает кучу окон. Хотя может это и не связано с темой. Версия drupal_render_page.

Виталий
05.10.2014, 23:11

Добавляю такой вывод для формы регистрации и входа user. Но при заполнении полей и нажатии сабмита, поля пропадают, а пустая форма отсается. Как сднлать, чтобы окно закрывалось и перегружало страницу?

ищите причину скрытия полей, модуль таким не занимается

Евгений
18.12.2014, 09:48

Модуль супер. Я со всем, что мне было нужно, разобрался. За исключением одной "фишки". Нужно, чтобы при открытии ноды через этот модуль, адрес в строке браузера менялся на адрес этой ноды. Пробовал и через простой JS, и через jQuery — ничего не происходит. С таким кодом:

$(function() {
  $('a.autodialog').click(function() {
    history.pushState({}, '', $(this).attr('href'));
  });
});

К адресу добавляется "#". Предполагаю потому, что Auto-Dialog меняет href ссылки (вернее, отменяет href при клике), чтобы не происходил редирект. Но как в данной ситуации поступить — не знаю. Кто-нибудь может подсказать?

вешайте свой обработчик раньше autodialog-овского

Евгений
18.12.2014, 10:31

Всё оказалось еще проще :)
Нужно было просто заменить "$" на "jQuery".

Может быть кому-то будет полезно: код, который добавляется в тему или модуль:

jQuery(function() {
  jQuery('a.autodialog').click(function() {
    history.pushState('', '', jQuery(this).attr('href'));
  });
});

А чтобы при закрытии окошка, возвращался прежний адрес, в файл autodialog.js в папке модуля, в строке 44 (ну или где-то близко), после первого события в "close:" нужно добавить:
history.back(1);
Решение не очень правильно, возможно, но работает :)

Сергей
23.02.2015, 13:34

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

Александр
03.04.2015, 14:02

Здравствуйте, отличный модуль но при включённом boost выдаёт ошибку

Возникла AJAX HTTP ошибка.
Полученный код HTTP: 200
Следует отладочная информация.
Путь: /node/108

Вообщем проблему с boost исправил патчем в autodialog.module строка 25:

- if (_autodialog_check_request() && $callback == 'drupal_deliver_html_page') {
+ if (_autodialog_check_request() && ($callback == 'drupal_deliver_html_page' || $callback == 'boost_deliver_html_page')) {

только по-моему это буст криво написан ? там переопределен delivery_callback и в его реализации в конце напрямую вызывается:

drupal_deliver_html_page($page_callback_result);

Вообщем буду признателен, если кто-то разъяснит этот момент, так как я не очень понимаю этот механизм и что такое delivery_callback...исправил просто посмотрев дебагером.

Заметил что не открывает страницу, если урл с якорем. А хотелось бы реализовать такую возможность.

Павел
15.07.2015, 14:03

Да, при первом клике все отлично но при последующих ничего не происходит. и выдает такую вот ошибку

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'option'

Павел
15.07.2015, 14:59

Я совсем не спорю с тем что все работает корректно на демке. возможно проблема в jQuery.
какая у вас версия ?

Гость
16.07.2015, 11:13

Модуль отличный, спасибо большое!
Есть вопрос по функционалу:
Редактирую референсную ноду посредством этого модуля и опций data-dialog-ajax="true" data-dialog-ajax-disable-redirect="true". Т.е. все системные сообщения при неверном заполнении полей показываются в текущем модальном окне (что очень здорово), а не перебрасывает на страницу с редактированием ноды. После сохранения изменений в референсной ноде необходимо перезагрузить текущую ноду (с которой была ссылка на редактирование референсной). Как это сделать? Есть какая-то настройка чтобы указывающая что после закрытия диалога необходимо автоматически перезагрузить страницу?

$('#dialog-id').dialog('option', 'close', function(){
  location.reload();
});
Гость
16.07.2015, 16:05

Спасибо, а вместо #dialog-id - нужно указать id dialoga конкретного диалога? Если та, то как быть если количество диалогов плавающее и зависит от количества ссылающихся нод?

И куда вставить этот код? просто в шаблон страницы через "script"?

Гость
20.07.2015, 11:55

xandeadx, подскажите пожалуйста по этому коду:

$('#dialog-id').dialog('option', 'close', function(){
  location.reload();
});

Создал файл reload.js который содержит этот код. Подключил его к типу материала через template.php
После закрытия диалогового окна перезагрузка не происходит. Консоль ругается на Uncaught TypeError: $ is not a function(anonymous function) @ reload.js

привел код к такому состоянию:

jQuery(function() {
  jQuery('#dialog-id').dialog('option', 'close', function(){
  location.reload();
});
});

Ошибка пропала, но перезагрузка все равно не работает, даже если меняю #dialog-id на #autodialog-2.

Подскажите пожалуйста, что я делаю не так? И как быть если на странице несколько диалогов и после закрытия каждого должна срабатывать перезагрузка?

код надо вызывать после открытия диалога

Гость
20.07.2015, 13:56

Подскажите, а после открытия диалога - это в конце страницы? или внутри диалога?

Если просто вставляю в конце страницы в тег script то к сожалению перезагрузка страницы после закрытия диалога не работает.

код страницы получается приблизительно такой: https://jsfiddle.net/azwfawop/

Версия jQuery 1.4.4 (обычная Друпаловская)

Я опять что-то делаю не так?

после открытия, это когда диалог открылся

Гость
20.07.2015, 16:00

Спасибо большое! Разобрался.
Для всех кому возможно понадобиться подобное решение:

в файл autodialog.js после строки

   $('#' + response.dialog_id).dialog(options);

добавил следующий код:

    $('#' + response.dialog_id).dialog('option', 'close', function(){
      location.reload();
    });

Теперь после закрытия любого диалога страница обновляется.

xandeadx, еще раз большое спасибо!

Павел
28.07.2015, 12:05

Можно ли как то уменьшить время появления диалогового окна?

например купить сервер помощнее

Гость
04.08.2015, 15:31

А как содержимое блока вывести в таком окне?

Гость
04.08.2015, 16:54

А как содержимое блока вывести в таком окне?

Только через PHP в темплейте

Гость
04.08.2015, 17:42

Только через PHP в темплейте

в темплейте самой ноды? Как содержимое передать в ссылку?

Гость
04.08.2015, 17:45

в темплейте самой ноды? Как содержимое передать в ссылку?

Можно ноды, типа материала, представления, автодиалога — в зависимости от того, где должен быть блок.
Какое содержимое в какую ссылку?

Гость
10.08.2015, 13:30

Можно ноды, типа материала, представления, автодиалога — в зависимости от того, где должен быть блок.
Какое содержимое в какую ссылку?

Содержимое например блока с id 1 в node.tpl.php

Посмотреть блок

Гость
10.08.2015, 13:36

Сорри, туплю... вот:
<a href="содержимое обычного блока" class="autodialog">Посмотреть блок</a>

Гость
11.08.2015, 14:33

я так понимаю, такая конструкция просто не срабатывает в самом модуле?

<?php $block = module_invoke('block', 'block_view', '5');?>
<a href="<?php print render($block['content']);?>" class="autodialog"><div class="nod_haracteristic">test</div></a>
</div>
Гость
01.09.2015, 08:21

А можно ли его как нибудь к флагу прикрепить? Если подробнее то, к Flagging form, чтобы изменение полей прикрепленных к флагу выводилось в диалоговом окне. С модулем Dialog API не работает

Гость
08.09.2015, 11:35

Как это добавить к пунктам меню? Добавил класс autodialog к пункту меню с помощью модуля Menu attributes. Модальное окно открывается но с блоками. Как убрать блоки из модальной формы?

Гость
08.09.2015, 14:55

Они не в регионе content это боковые блоки. Я делаю форму создания материала. http://test.tessellagrid.com/en Боковое меню ASK FOR MUNICIPALITY пункт ASK A QUESTION Посмотрите пожалуйста

Так понимаю у вас там панель вместо региона content. Как быть не знаю, с панелями не знаком.

Гость
08.09.2015, 15:22

Отображаются полностью все блоки, даже те которые не в панелях.

Гость
11.09.2015, 17:07

Можно ли добавить этот класс в такой код
<?php print flag_create_link("change", $row->nid); ?>

Гость
13.09.2015, 11:17

Подскажите пожалуйста как можно темизировать модальное окно?

Прекрасный модуль, пользуемся им. Единственное, огорчает явное указание ширины, e.g. data-dialog-width="630" . Понятно, что это претензия не к модулю, а к jQuery UI Dialog. Пытаюсь делать data-dialog-width="auto" (data-dialog-height="auto") - ширину считает нормально, но исчезает центрирование. Может, кто-то уже решил этот вопрос.

Михаил
24.10.2015, 07:46

Спасибо за отличный модуль! Подскажите как его можно темизировать? Нашел в модуле папку templates, но при добавлении классов через эти файлы, изменяется вид только для содержимого внутри модального окна, а как можно применить класс к самому окну?
За присвоение доп. класса модальному окну, как понял я, отвечает опция dialogClass.
Пробовал так но не срабатывает: data-dialog-dialogClass="myclass".
Объясните или ткните хотя бы где это можно узнать.

Гость
14.11.2015, 16:36

Вопрос, у меня длинная страница (текст ноды) , ссылка на Контакт форму внизу(она идёт как autodialog), при открытие окна с формой, созданное autodialog окно "улетает" вверх страницы не прокручивая страницу. Приходиться самому идти вверх чтоб заполнить форму. Нельзя ли сделать так чтоб окно открывалось в том же месте страницы, на которое смотрит пользователь, или прокручивать родительскую страницу вверх вслед за autodialog окном.

Спасибо.

диалог открывается в центре текущего вьюпорта. что-то делаете не так.

Гость
16.11.2015, 17:57

А viewport он случайно определяет не по zindexу, такое ощущение что окно улетает к headerу вначале страницы, у него zindex 1000 и он не затемняется при появление окна. У меня сайт на теме bootstrap 3.x.

Виталий
02.12.2015, 18:54

Как отменить вывод всех блоков/регионов, кроме основного $page[content'] в окне диалога?

Ричард
06.01.2016, 18:11

После закрытия диалогового окна вокруг посещенной ссылки остается border, который убирается при следующем клике не важно куда. Как от него избавиться?

Павел
10.01.2016, 18:50

Подскажите пожалуйста. почему выдает ошибку при попытке отобразить страницу checkout
Drupal Commerce

Гость
15.01.2016, 10:13

А подскажите, как вставить в ссылку атрибут data. Использую menu attribut, но там нет возможности добавить кастомный атрибут

Радик
04.02.2016, 11:57

То же самое, окно улетает наверх, а ссылка внизу. Может как-то можно контролировать местоположение autodialog относительно ссылки на него?

Гость
13.04.2016, 13:56

В целом все выводится стильно) Спасибо.
Но, есть проблема как у Радика.
+ При загрузке ноды в окно, в левом углу экрана появляется отчетливо видимый URL открываемой ноды
+ очень слабое затемнение экрана (скорее легкое помутнение), на фоне которого появляется окно.

Алексей Владимирович
04.05.2016, 04:06

Подскажите, а возможно ли убрать комментарии к ноде из всплывающего окна?

Алексей
09.08.2016, 14:59

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

Игорь
17.08.2016, 10:48

Можно ли при скроле страницы фиксировать окно диалога на экране?

Не подскажите, почему может не работать data-dialog-ajax-disable-redirect="true"

Редирект все равно осуществляется.

Гость
09.09.2016, 07:59

Подскажите как у модального окна определить МАКСИМАЛЬНУЮ ширину - для адаптивной темы.

data-dialog-maxwidth="700"

не работает((

Замечательный модуль. Но не могу добиться, чтобы страница не обновлялась после отправки формы. Страница обновляется, после чего в модальном окне появляется сообщение об успешной отправке, но форма в модальном окне не закрывается.

triamera977
05.12.2016, 13:54

Здравствуйте. Форму открываю в модальном окне

<a class="autodialog" data-dialog-ajax="true" data-dialog-ajax-disable-redirect="true" data-dialog-title="Модальное окно" data-dialog-width="1000" href="<?php print base_path(); ?>node/510">Забронировать</a>

Можно ли сделать так чтоб при заполнение формы когда её закрываем и открываем заново то данные которые ввели ранее оставались? Чтоб например форма очищалась после отправки либо после перезагрузки страницы.

Сохраняйте значение в куки или сессию, подставляйте значения при выводе формы.

Альберт
18.12.2016, 15:02

Приветствую xandeadx, поменял page.tpl.php для анонимов, путем внедрения кода в препроцессор tamplate.php

if (empty($vars['user']->uid)) {
    $vars['theme_hook_suggestions'][] = 'page__YOURFILE';
  }

Теперь при открытии формы входа входа на сайт по ссылке /user открывается вся страница, а до этого открывалась только форма. Что исправить в модуле, или есть способ как вывести только тело формы входа на сайт в окне диалога?

if (empty($vars['user']->uid) && !_autodialog_check_request())
Альберт
18.12.2016, 16:01

Огромное спасибо, РАБОТАЕТ!!! А я уже начал создавать новые tpl.php в шаблонах модуля)) ничего не получилось.

Модуль действительно крутой!

А как все-таки свой блок вывести в таком окне?

Посмотреть блок так соответственно не работает...

Спасибо.

data-dialog-dialog-class="myclass" - не добавляет класс (

Гавриил
23.04.2017, 17:38

Заметил один баг, в мозилле, если ссылка на диалог расположена в середине или внизу страницы, в общем, если страница прокручивается, диалог убегает в самый вверх и не виден, нужно прокрутить страницу обратно наверх. В опере и в остальных браузерах работает норм.

Не получается вывести страницу commerce checkout. Подскажите, пожалуйста, решение.

Что именно у вас не получается?

Использую dc_ajax_add_cart. В настройке Checkout button redirect сразу на оформление заказа. Вывожу в панели блок. Поставил ваш модуль и модуль Asaf. Добавляю кнопке

<div class="ajax-shopping-cart-checkout"><a href="/checkout" class="dc-ajax-add-cart-checkout-link dc-ajax-add-cart-checkout-checkout">Оформить заказ</a></div>

атрибуты и класс

        $('.ajax-shopping-cart-checkout a').addClass('autodialog').attr({
            'data-dialog-ajax': 'true',
            'data-dialog-ajax-disable-redirect': 'true'
        });

Продолжает переходить на страницу оформления заказа.

Навряд ли у вас что-то выйдет с Asaf. Форма чекаута уже работает на ajax, но довольно специфично.

Гавриил
27.05.2017, 07:49

Не работает recaptcha с этим модулем. Обычная капча отображается...

/**
 * Implements hook_form_alter().
 */
function hook_form_alter(&$form, &$form_state, $form_id) {
  if (isset($form['captcha']) && $form['captcha']['#captcha_type'] == 'recaptcha/reCAPTCHA' && _autodialog_check_request()) {
    drupal_add_js('https://www.google.com/recaptcha/api.js', array('type' => 'external'));
  }
}
Гость
30.05.2017, 17:30

Гавриил, Fix scrolling как применить, может подробнее раскажите?

xandeadx, а не подскажешь возможен ли такой вариант:
есть вьюшка с тизерами контента и кнопкой edit. вывожу форму редактирования в autodialog, аяксифицирую.

возможно ли как то обновить вьюшку после сабмита формы через autodialog, чтобы внесенные данные сразу отображались без перезагрузки страницы?

нашел вот этот модуль views_autorefresh
но чтобы по определенному тригеру обновлялось нужно rules+node.js стаивть. оч не хочеться нагружать всем этим.

Auto-Dialog здесь не при чём. В ajax сабмите формы обновляйте views с помощью ajax_command_replace() или ajax_command_html().

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