AJAX подгрузка данных типа "ЕЩЕ ПОКАЗАТЬ" в MODX Revolution
Разберёмся сегодня с AJAX загрузкой последних постов при нажатии на кнопку "Показать ещё". Создадим контейнер, куда будут записываться результаты полученного ответа от AJAX запроса.
<div id="result"></div>
Создадим кнопку с атрибутами data-action, data-tpl, data-parents, в которых будем передавать необходимые данные:
| Параметр | Значение | Что обозначает |
|---|---|---|
| data-action | getResources | Сниппет для вывода информации |
| data-tpl | tpl.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-запрос, в нём укажем следующие параметры:
| Параметр | Значение | Что обозначает |
|---|---|---|
| offset | 0 | Начальный сдвиг равен 0 |
| .post(URL,data,...)) | 'http://modx.ws/demo/ajax' | URL ресурса, отвечающего на AJAX запросы |
| limit | 5 | По-умолчанию лимит равен 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); } Вот и все!