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);
}

Вот и все!

15823