• статья
  • pantey

Вывод контента в модальное окно через Ajax. Модуль ajaxcontent.

31.10.2014

Как то, для одного из проектов, мне было необходимо выводить статьи сайта, а именно полное содержимое ноды, в модальное окно и желательно через Ajax, дабы не нагружать страницу с тизерами. Первое, что пришло в голову – это использовать Colorbox_node, но согласитесь, что для получения простейшего функционала использовать достаточно объёмную библиотеку данного плагина не самая хорошая идея, поэтому я написал небольшой модуль, который реализует данный функционал без подключения дополнительных плагинов jQuery, а использует лишь фреймворк Ajax Drupal.

Результат работы модуля

Данный модуль не имеет никаких настроек, все, что от вас требуется – это передать ему id ноды [nid], вывод которой вам необходим в модальном окне. По сути, все, что вам нужно сделать – это добавить в файл node.tpl.php ссылку, по следующему шаблону:

  1. <a href="/ajaxcontent/nojs/<?php print $node->nid;?>" class="use-ajax">Открыть в модальном окне</a>

И теперь по клику по ссылке у вас будет открывать модальное окно с полным содержимым ноды.

Хочу заметить, что в вывод попадает только контент, форма комментариев в него не входит (входит начиная с версии 1.01).

Скачать модуль Ajaxcontent, версия 1.0

Обновление до версии 1.01

Список изменений:

  • Добавилась возможность загружать в окно и комментарии ноды
  • Добавилась страница для настройки модуля (Конфигурация -> Интерфейс пользователя -> Ajax Content)

Скачать модуль Ajaxcontent, версия 1.01

Обновление до версии 1.02

Список изменений:

  • Исправлена ошибка при загрузке файла, при включенном модуле ajaxcontent

Скачать модуль Ajaxcontent, версия 1.02

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

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

Profile picture for user Anton
Коля
31.10.2014

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

Profile picture for user pantey
pantey
31.10.2014

варианты всегда есть, только для вывода комментариев нужно так же озаботиться и об их отправке, а также форме ответов на комментарии - здесь все сложнее, нужно подумать вообщем.

Profile picture for user Anton
Женя
01.11.2014

С комментариями, это былабы бомба!

Впринципе содержимое ноды можно вывести с помощью любого лайтбокса(если конечно он установлен на сайте)
вот тут описан пример вывода в Colorbox, я вывожу по этому примеру в Fancybox:

<a href="#content-div-1" class="myclass">Open Example</a>
<div style="display: none">
    <div id="content-div-1">
          <?php print render (node_view(node_load(19)), FALSE, TRUE);?>
    </div>
</div>

где 19 - это NID

JS

$(".myclass").fancybox({
	      //настройки на свое усмотрение
		fitToView: false,
		maxWidth:"90%",
		margin:[20,60,20,60],
		width: 800,
		padding: 0
	});  
Profile picture for user Anton
Коля
25.11.2014

при включенном модуле не работает стандартная форма загрузки изображений

Profile picture for user pantey
pantey
25.11.2014

Спасибо, исправлено в версии 1.02

Profile picture for user Anton
Иван
18.12.2014

У меня с Colorbox Node была такая проблема, что он на мультиязычном сайте дополнительные поля подргружал без перевода, но на языке сайта по умолчанию. Поля Title и body переводил. А все остальное нет. Так и не решил эту проблему...

Profile picture for user Anton
Игорь
22.01.2015

Доброго времени суток.
А как сделать что бы можно было вставлять в Глобальный: Пользовательский текст. Как подставочный шаблон?

Profile picture for user Anton
Дмитрий
24.05.2015

Здравствуйте.
Подскажите пожалуйста. В своем модуле вы решаете задачу вывода содержимого ноды в всплывающее окно.
А что нужно изменить чтобы выводить не в окно, а определенный блок, на определенной странице (точнее даже русскую версию на одну страницу, а английскую на другую, но блок один и тот же).
Заранее благодарен.

Profile picture for user Anton
Олеп
29.08.2015

Модуль Nodeblock

Profile picture for user Anton
женя
01.11.2015

Павел, а можно, в качестве модального окна, использовать fancybox, если да, то каким образом?

Profile picture for user pantey
pantey
02.11.2015

Можно. Удалить подключение JS скрипта, который идет в данном модуле. Далее написать свою Ajax команду, которая после выполнения Ajax запроса будет открывать модальное окно Fancybox.
Как создать свою Ajax команду ?
Fancybox API (как открыть модальное окно)

Profile picture for user Anton
Гость
01.02.2016

Есть два типа матерьяла: вакансия и резюме, задача: при добавлении матерьяла пользователем выводить его в модальное окно. Я так понимаю, в вашем примере нужно в ручную указать номер ноды, а как зделать чтоб все матерьялы определёного типа выводильсь окном ?

Profile picture for user Anton
Вася
29.05.2016

Можно как то отдельно вывести в модальное окно, только нужные поля с ноды.

Profile picture for user pantey
pantey
29.05.2016

измените ф-ю _ajaxcontent_load_noder как вам нужно.
Переменная $vnode содержит все поля ноды.