MODX - Вывод случайного ресурса с помощью AJAX
Урок, на котором рассмотрим, как в MODX Revolution с помощью технологии AJAX реализовать вывод случайной статьи на странице.
Описание процесса вывода случайной статьи на странице

Основные действия, которые нам предстоит реализовать, для того чтобы вывести случайную статью на странице, выразим с помощью следующих шагов:
- Создать на стороне клиента (с помощью скрипта JavaScript) асинхронный запрос и отправить его на сервер по адресу текущей страницы.
- Получить запрос, отправленный клиентом, на сервере с помощью сниппета (
ajaxSnippet
). В этом сниппете будем обрабатывать полученный запрос, формировать ответ и отправлять его клиенту (веб-браузеру). - В этот время (после того как мы отправили запрос на сервер) страница (веб-браузер) ждёт на него ответ… Как только ответ прийдет с сервера, выводим его с помощью JavaScript на страницу.
Кроме этого выводить будем не одну случайную статью после загрузки страницы, а организуем так называемое слайд-шоу. Т.е. будем заменять одну случайную статью другой через некоторое время (например, для наглядности через 5 секунд).

На уровне кода необходимо будет выполнить следующее:
- В шаблоне "Пост":
- создать контейнер (блок
div
) в который будем выводить случайную статью; - создать js-код, который будет выполнять 3 основные действия: отправлять запрос на сервер, получать от него ответ и отображать его на странице. Данный JavaScript код создадим не в самом шаблоне, а в чанке "chunk.footer", который будет вызываться из данного шаблона;
- поместить вызов некэшируемого сниппета "ajaxSnippet". Он будет обрабатывать на сервере запрос, поступивший от клиента и отправлять ему ответ.
- создать контейнер (блок
- Создать в MODX сниппет, имеющий имя ajaxSnippet. Он будет выполнять действия ("магию") вышеприведённого пункта.
Код сниппета ajaxSnippet
В сниппете для получения случайной статьи будем использовать сниппет getTicket. Получать случайную статью будем из раздела, который имеет идентификатор 4.

<?php // Если запрос не AJAX (XMLHttpRequest), то завершить работу if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;} // Проверяем является ли $_POST['action'] пустым. Если да, то завершаем работу if (empty($_POST['action'])) {return;} // В противном случае выполняем следующие действия: // 1. Заводим переменную, которая будет хранить результат $res = ''; // 2. Так как данный сниппет можно будет использовать и для других запросов, то выберем действие которе нужно выполнить с помощью оператора switch switch ($_POST['action']) { case 'randomTicket': // 3. Параметры для выполнения сниппета $param = array( 'sortby' => 'RAND()', 'limit' => 1, 'tpl'=> '@INLINE <h3>[[+pagetitle]]</h3>[[+introtext]]<p><a href="[[~[[+id]]]]" class="btn btn-primary" role="button">Читать далее...</a>', 'parents'=> 4 ); // 4. Выполнить сниппет getTickets $res = $modx->runSnippet('getTickets',$param); break; // При необходимости можно добавлять новые методы } // Если ответ не пустой, то отдаём и прерываем работу парсера MODX if (!empty($res)) { // Выводит сообщение ($res) и прекращает выполнение текущего скрипта die($res); }
Код шаблона "Пост"
Внесём следующие изменения в шаблон "Пост":

- Поместим блок с идентификатором
randomTicket
в контейнер, имеющий классcol-md-4
:<div class="col-md-4"> [[$search]] <div id="randomTicket" class="thumbnail" style="padding:15px;"></div>
- Поместим вызов сниппета ajaxSnippet:
<div class="col-md-4"> [[$search]] <div id="randomTicket" class="thumbnail" style="padding:15px;"></div> [[!ajaxSnippet]]
- Добавим JavaScript код в чанк "chunk.footer":
MODX Revolution - Изменение чанка chunk.footer <script> // после загрузки страницы $(function() { // вызвать функцию showRandomTicket() showRandomTicket(); // смену новости будем выполнять каждые 5 секунд setInterval(showRandomTicket, 5000); // функция showRandomTicket() function showRandomTicket() { // Выполняем ajax запрос к текущей страницы (к сниппету ajaxSnippet) методом post $.post(document.location.href, {action: 'randomTicket'}, function(data) { // полученный ответ выводим в блок, имеющий идентификатор randomTicket // вывод блок будем сопровождать анимацией $('#randomTicket').fadeOut(300, function() { $(this).html(data).fadeIn(800); }); }); }; }); </script>
Демонстрация работы созданного кода
Проделанную работу продемонстрируем с помощью следующего видео ролика:
Воспользовался материалами из вашей статьи и сделал своеобразный «каталог с использованием ajax»
Вверху название категорий, на них жмешь, ниже вылезает содержание. При нажатии на категорию просто происходит ajax вызов getProducts с нужными параметрами.
<img
src=«https://itchief.ru/assets/uploadify/e/8/9/e89ed61a9a2c28f91f68e21fda7e7b57s.jpg» class=«fancybox thumbnail center»>
Но потребовалась доб опция!
Нужно сортировать полученные результаты, по цене, имени и др. Как ни пытался ничего не получается.
Подскажите плиз, как это сделать?
(а картинку, картинкой а не кодом можно у вас вставить?)
Как и где добавить кнопку или ссылку «Следующая статья»
Спасибо.
Вывожу случайные цитаты
Первомай
1. В сниппете ajaxSnippet необходимо изменить параметр tpl, а именно добавить кнопку с помощью которой пользователь будет вызывать следующую случайную запись:
2. Изменить сценарий JavaScript следующим образом (т.е. добавить обработчик события click для кнопки #nextArticle):
Кнопку " Читать далее..." как убрать?
Спасибо.
Т.е. в качестве значения оставить только:
Посмотрите, что у Вас возвращается в браузере на вкладке Network.
Спасибо.
Необходимо только изменить параметры в коде сниппета ajaxSnippet в п.3.
Ошибка 500, страница не грузится
И почему-то конфликтует скрипт с jquery.tweet.js, который у меня в шаблоне