xandeadx.ru Блог музицирующего веб-девелопера

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

Выложил свой модуль 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
Похожие записи

Комментарии RSS

вы, черт возьми, волшебник!

потрясающе ) спасибо

[зачеркнуто]Бренч drupal_render_page не отображает ноду корректно - видно, что целевая страница рендерится, через доли секунды перекрывается множеством окон ui-dialog или типа того.[/зачеркнуто]
А вот через пару чисток кеша и которых-то манипуляций - опачки! все именно как и планировалось.

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

data-dialog-modal="0"

data-dialog-modal="0"

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

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

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

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

скройте в preprocess_node

Так 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/func...

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

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

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

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

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

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

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

Наверное не правильно объяснил. Обычная форма авторизации: http://s009.radikal.ru/i310/1410/45/dc34d4cf6511.png , а потом http://s04.radikal.ru/i177/1410/a8/359bd8570622.png

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

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

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

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

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

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

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

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

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

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

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

Тоже ошибка с boost модулем

Вообщем проблему с 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...исправил просто посмотрев дебагером.

Спасибо, Max.

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

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

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

как можно проверить на http://autodialog.xnddx.ru/ модуль работает при любом количестве кликов

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

упс, вышла ссылка))

вот что нужно передать:

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

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

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

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

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

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

убрать их из региона content

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

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

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

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

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

почему то не работает ссылка

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

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

data-dialog-dialog-class="myclass"

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

Спасибо.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

data-dialog-maxwidth="700"

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

data-dialog-max-width="700"

но лучше из css

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

Здравствуйте. Форму открываю в модальном окне
<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>
Можно ли сделать так чтоб при заполнение формы когда её закрываем и открываем заново то данные которые ввели ранее оставались? Чтоб например форма очищалась после отправки либо после перезагрузки страницы.

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

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании