Разберёмся сегодня с 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`]]
Кнопка “Показать ещё”:
<button class="more" data-action="getResources" data-tpl="tpl.getResources.row" data-parents="[[*id]]">Показать ещё</button>
Создадим скрипт, который будет обрабатывать нажатие кнопки и отправлять post-запрос, в нём укажем следующие параметры:
Параметр
Значение
Что обозначает
offset
0
Начальный сдвиг равен 0
.post(URL,data,…))
‘https://modx.ws/demo/ajax’
URL ресурса, отвечающего на AJAX запросы
limit
5
По-умолчанию лимит равен 5, поэтому сдвиг будет offset+=5
`
`
Исходя из того, что параметр 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);
}`
Демо