Ajax подгрузка контента на jQuery
Иногда стоит задача реализовать AJAX загрузку контента с сервера без перезагрузки страницы. Например, обновить комментарии или подгрузить полный текст статьи при клике на кнопку «Подробнее». Для этого в jQuery есть удобный метод jQuery load(). Он делает асинхронный запрос на сервер и вставляет полученные данные (HTML разметку) в указанный элемент.
$("#result").load("ajax.html");
Вторым аргументом можно передавать параметры запроса
$("#result").load("ajax.php",{param1: value1, param2: value2});
Давайте посмотрим как он работает.
Предположим у нас есть страница с новостями, на которой выводится анонс этих новостей. В конце анонса располагается ссылка «Подробнее» на полный текст новости. Выглядеть это может, например, так.

При клике на ссылку в определенный блок должна подгрузиться вся новость полностью. Вот так выглядит ссылка
<a class="read-more" data-id="5" href="#">Подробнее</a>
где data-id="5"
— это id страницы новости. У каждой новости он будет свой.
А сам контент полной новости выводится в блок div, который расположен в конце страницы.
<div id="content"></div>
Для того, чтобы подрузка заработала, нам нужно выполнить пару действий.
Шаг 1. Контроллер для AJAX запросов
Создадим файл, на который будем отправлять AJAX запрос и который будет возвращать контент указанной страницы. Назовем его ajax.php и положим в папку assets.
<?php // Если запрос не AJAX или не передано действие, выходим if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest' || empty($_REQUEST['action'])) {exit();} $action = $_REQUEST['action']; define('MODX_API_MODE', true); require_once dirname(dirname(__FILE__)).'/index.php'; $modx->getService('error','error.modError'); $modx->getRequest(); $modx->setLogLevel(modX::LOG_LEVEL_ERROR); $modx->setLogTarget('FILE'); $modx->error->message = null; $output = ''; switch ($action) { case 'getContent': // Если не передан id страницы, тоже выходим $id = isset($_REQUEST['id']) ? (int) $_REQUEST['id'] : 0; if (empty($id)) { exit(); }; $object = $modx->getObject('modResource',$id); $output = $object->get('content'); // Парсим теги MODX $maxIterations= (integer) $modx->getOption('parser_max_iterations', null, 10); $modx->getParser()->processElementTags('', $output, false, false, '[[', ']]', array(), $maxIterations); $modx->getParser()->processElementTags('', $output, true, true, '[[', ']]', array(), $maxIterations); } @session_write_close(); exit($output);
Шаг 2. Скрипт обработки
Теперь нам нужно сделать так, чтобы по клику на ссылку «Подробнее» на наш коннектор пошёл AJAX запрос. Сделаем это с помощью jQuery. Создадим файл скрипта и подключим его на странице.
// jQuery должен быть уже подключен $(document).on('click','.read-more',function(e){ e.preventDefault(); var id = $(this).data('id') || 0; // Вставляем полученный контент в HTML блок с id="content" $("#content").load("/assets/ajax.php",{action:"getContent", id:id}); });
Вот и всё. Если запрос прошел успешно, то в блок с id="content"
вставится содержание, которое возвращается из коннектора.
Пример для модального окна
Давайте на практике попробуем использовать данный прием для вывода контента в модальное окно. Опять же воспользуемся фреймворком Bootstrap. В нём уже есть модальные окна.
Добавим в футер разметку модального окна
<div class="modal fadeIn" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Модальное окно</h4> </div> <div id="content" class="modal-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-close">Закрыть</button> </div> </div> </div> </div>
Открывать модальное окно мы будем при условии, что контент новости не пустой, т.е. что-то вернётся. А проверять наличие контента мы будем с помощью третьего агрумента функции .load(url, data, complete)
. Javascript код будет выглядеть так
$(document).on('click','.read-more',function(e){ e.preventDefault(); var id = $(this).data('id') || 0; // Вставляем контент в тело модального окна $("#content").load("/assets/ajax.php",{action:"getContent",id:id}, function(response){ // Если ответ не пустой, открываем модальное окно if (response) { $("#mymodal").modal('show'); } }); });
Напоследок
Ну и в конце хочу отметить интересную возможность метода load()
. В отличие от других методов он позволяет фильтровать полученный контент с помощью CSS селекторов. Т.е. если нам нужен не весь контент, а только блок с комментариями с id="comments"
, то указываем это в запросе.
$("#result").load("ajax.php #comments");
Комментарии ()
Вы должны авторизоваться, чтобы оставлять комментарии.
У меня получилось воспроизвести работу решения, а начинаю добавлять другие поля типа «pagetitle» или вообще свойство твара «color» и стопорюсь
Только при нажатии кнопки подробнее кирилический текст отображается кракозябрами
Есть ресурс Портфолио(3). И дочерние ресурсы(36), (46)-Проекты. Они будут добавляться постоянно.
На ресурсе Портфолио нужно вывести картинки-preview, по клику на которые в модальном окне показывается содержимое ресурса-проекта в виде слайдера.
В шаблоне Портфолио [[!getResources? &resources=`36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60` &tpl=`clickImage` &limit=`70` &sortby=`{«publishedon»:«ASC»,«createdon»:«ASC»}` &includeTVs=`1` &processTVs=`1` &includeContent=`1` &showHidden=`1`]]
Чанк `clickImage`
[[+tv.textClick]]
[[+tv.clickImage]] и [[+tv.textClick]] — доп поля в ресурсах шаблон Проекты.
В ресурсах шаблона Проекты отлично выводятся все слайдеры с помощью Migx+Flexslider.
На ресурсе Портфолио выводятся картинки-preview.
Делаю, все, как у вас написано, но по клику, в блок id=«comments» ничего не добавляется. Ошибок в консоли тоже нет.
Как все-таки вывести эти слайдеры дочерних страниц в модальном окне?
П.С. Код лучше оборачивать в тег code. Обратите внимание насколько это выглядит читабельнее в статье.
Уже раз 5 проверила все — при клике пустой:
Сделано так:
Шаблон Портфолио
Чанк clickImage:
Шаблон Проект
Чанк hiddenSlider
файл контроллера положен в папку assets/ajax.php
скрипт помещен в assets/js/script.js
Все переменные, которые учавствуют в сриптах на местах. Ссылки на странице Портфолио имеют вид
а все равно не открывается((( Почему?
:a
В полученном ответе ищется HTML элемент с id=«comments». Так задумано? Он у вас есть?
Находится в каждом дочернем шаблоне Проект:
Более того, ничего не выводится, даже если его убрать совсем:
Если возникает ошибка, значит что-то сделали не так. Для начала попробуйте обратиться к файлу напрямую. А в файле в первой строке укажите
Указанное сообщение должно появиться на странице.
Путь указывается в функции load()
Именно так и делаю, а толку ноль. А когда /assets/podgruzka-kontenta-ajax.php так то работает, почему сам понять не могу
$("#content").load("/assets/ajax.php #comments-1",{action:«getContent»,id:id}, function(response){… });
$("#content").load("/assets/ajax.php #comments-2",{action:«getContent»,id:id}, function(response){… });
Подскажите пожалуйста, почему не подгружаются данные из тегов на странице? *pagetitle и другие
Только не забудьте добавить проверку существования ресурса перед работой со свойствами.
И прошу прощения. Вместо стрелки вверх промахнулся на минус… плохо что не отменяются.
Написал опросник:
Вопросы созданы при помощи MIGX на странице id=15 таблица Quests
На странице «вопрос-ответ» ajaxform проверяет правильность ответа на вопрос №1 и в случае true записывает hookmyform результаты в таблицу Answers результатов MIGX, после чего должен отобразиться следующий вопрос №2 и соответственно новая форма под новый ответ Без перезагрузки страницы целиком
Из вашей статьи понимаю, что нужно использовать отдельный файл php, а вот дальше знаний и логики не хватает
Буду очень признателен за помощь. Только осваиваю данную тему
При использовании ajax.php не выводятся лексиконы в окне (и я надеюсь, что именно поэтому так же не появляются всплывающие подсказки jgrowl)
Второй непонятный момент
скрипт, переключающий табы внутри модального окна тоже перестал работать при использовании ajax.php
Есть нюанс