AJAX подгрузка данных типа "ЕЩЕ ПОКАЗАТЬ" в MODX Revolution

Разберёмся сегодня с AJAX загрузкой последних постов при нажатии на кнопку "Показать ещё". Создадим контейнер, куда будут записываться результаты полученного ответа от AJAX запроса.

Код
<div id="result"></div>

Создадим кнопку с атрибутами data-action, data-tpl, data-parents, в которых будем передавать необходимые данные:

ПараметрЗначениеЧто обозначает
data-actiongetResourcesСниппет для вывода информации
data-tpltpl.getResources.rowЧанк вывода отдельной статьи
data-parents[[*id]]Родительский контейнер, из которого будем выводить посты, в данном случае - текущий ресурс

Чанк tpl.getResources.row:

Код
<div> <h3><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h3> <p>[[+introtext]]</p> <p>[[+publishedon:strtotime:date=`%d.%m.%Y`]]</p> </div>

Кнопка "Показать ещё":

Код
<button class="more" data-action="getResources" data-tpl="tpl.getResources.row" data-parents="[[*id]]">Показать ещё</button>

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

ПараметрЗначениеЧто обозначает
offset0Начальный сдвиг равен 0
.post(URL,data,...))'http://modx.ws/demo/ajax'URL ресурса, отвечающего на AJAX запросы
limit5По-умолчанию лимит равен 5, поэтому сдвиг будет offset+=5
Код
<!-- Наш скрипт запроса и обработки --> <script type="text/javascript"> $(document).ready(function() { var offset = 0; // Вешаем обработчик события "клик" на кнопку с классом .more $('button.more').click(function() { // Ajax post-запрос к странице, выдающей ресурсы (в ней сниппет ajaxResources) var data = $(this).data(); $.post('http://modx.ws/demo/ajax', data, function(data) { offset +=5; // Выдаем ответ $('#result').append(data); $('button.more').data('offset', offset); }) // В случае если у вас вместо кнопки ссылка - a href="#", то расскоментируйте строку ниже // return false; }) }) </script>

Исходя из того, что параметр offset (сдвиг) - это переменная, которая изменяется и является динамической, то я храню и обрабатываю её джаваскриптом. Правильным было бы использование data-offset, data-limit параметров, но для простоты кода сделал так.

Создадим ресурс с пcевдонимом ajax, который будет отдавать данные, чтобы полный адрес был sitename.com/ajax. Зададим ему шаблон Blank и вставим в содержимое вызов сниппета ajaxResources.

Cниппет ajaxResources

Код
<?php // Отвечаем ТОЛЬКО на ajax запросы if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;} // данный код можно расширить добавив другие действия и указать их в case $action = filter_input(INPUT_POST,'action'); // Если в массиве POST нет действия - выход if (empty($action)) {return;} // А если есть - работаем $res = ''; switch ($action) { case 'getResources': // Задаём параметры для сниппета в AJAX запросе $params = array(); $params['tpl'] = filter_input(INPUT_POST,'tpl'); $params['parents'] = filter_input(INPUT_POST, 'parents', FILTER_SANITIZE_NUMBER_INT); $params['offset'] = filter_input(INPUT_POST, 'offset', FILTER_SANITIZE_NUMBER_INT); $res = $modx->runSnippet('getResources', $params); break; } // Если у нас есть, что отдать на запрос - отдаем и прерываем работу парсера MODX if (!empty($res)) { die($res); } 

Вот и все!

16843