AJAX загрузка комментариев QUIP в MODX Revolution
Попробуем разобраться сегодня как загружать комментарии используя Quip, AJAX и прямые руки. Для начала установите компонент Quip, если он ещё не установлен.
Создадим ресурс с произвольным именем, шаблоном _Blank (!) и назначим ему псевдоним (alias) как ajaxgetcomments, переходим на вкладку Настройки (Settings) и ставим чекбокс Заморозить URI (Freeze URI) и выставляем значение ajaxgetcomments без ".html".
Вставляем в поле "содержимое" (content) некешируемый вызов сниппета ajaxGetComments. Получается следующая картина:
Давайте теперь создадим сам сниппет ajaxGetComments. Этот сниппет - всего лишь модифицированный сниппет Quip, который будет принимать параметр thread от AJAX вызова и выдавать соответствующий тред комментариев. Скопируем код сниппета Quip и добавим туда сверху код, принимающий параметр thread (нужный тред) и передающий его в $properties в виде массива после инициализации контекста:
<?php $thread = $_GET['thread']; // получение через GET ИД треда, далее поменяем на POST if (empty($thread)) {return "Пусто";} $quip = $modx->getService('quip','Quip',$modx->getOption('quip.core_path',null,$modx->getOption('core_path').'components/quip/').'model/quip/',$scriptProperties); if (!($quip instanceof Quip)) return ''; $quip->initialize($modx->context->get('key')); $scriptProperties = array('thread' =>$thread); //ИД треда комментариев $controller = $quip->loadController('Thread'); $output = $controller->run($scriptProperties); return $output; ?>Мы проверим вначале работу сниппета и, если всё сделали правильно и получаем комментарии, то поменяем GET на POST.
Проверим теперь работу сниппета: напишем в адресной строке браузера запрос, вида: http://mysite.com/ajaxgetcomments?thread=mythread, где mythread - это ИД треда, для меня строка проверки работы была http://modx.ws/demo/ajaxgetcomments?thread=blog-post-11
ИД треда можно найти в менеджере в Quip компоненте, смотрим изображение:
Итак, если сниппет работает как нужно, то меняем запрос GET на POST и добавляем вверху сниппета ajaxGetComments для проверки наличия AJAX-запроса следующую строчку:
if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;}Создадим код кнопки "Показать комментарии", которая будет содержать данные о треде вывода комментариев в атрибуте data-thread. Вставляем его в том месте шаблона, где планируем выводить комментарии. Код кнопки:
<!-- Ссылка с нужным классом и data - атрибутом, с действием --> <a href="#" class="ajax_link btn" data-thread="blog-post-11"><i class="icon-th-list"></i> Показать комментарии</a> <hr> <!-- html элемент для вставки ответа от php --> <div id="result"></div>
Создадим JS-код, который будет обрабатывать нажатие кнопки, брать данные о треде из атрибута data-thread и отсылать его в post-запросе на нужный нам URL:
<script type="text/javascript"> $(document).ready(function() { // Вешаем обработчик события "клик" на все ссылки с классом ajax_link $('a.ajax_link').click(function() { // Берем данные о треде из атрибута data-thread ссылки var thread = $(this).data('thread'); // alert показывает нам лишь, что какие данные получили из data-thread, его можно удалить alert("Получаем комментарии из треда: " + thread); //144 - ИД ресурса с алиасом ajaxgetcomments $.post('[[~144]]', {thread: thread}, function(data) { // Выдаем ответ в контейнер с id="result" $('#result').html(data); }) // Не даем ссылке кликнуться - нам же не нужна перезагрузка страницы? return false; }) }) </script>Вставляем данный код после вызова библиотеки jQuery (на момент написания статьи - 1.8.2). Добавляем необходимые стили и в итоге получаем следующий код шаблона:
<html> <head> <title>[[++site_name]] - [[*pagetitle]]</title> <base href="[[++site_url]]" /> <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css"> <!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]--> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // Вешаем обработчик события "клик" на все ссылки с классом ajax_link $('a.ajax_link').click(function() { // Берем данные о треде из атрибута data-thread ссылки var thread = $(this).data('thread'); // alert показывает нам лишь, что какие данные получили из data-thread alert("Получаем комментарии из треда: " + thread); //144 - ИД ресурса с алиасом ajaxgetcomments $.post('[[~144]]', {thread: thread}, function(data) { // Выдаем ответ $('#result').html(data); }) // Не даем ссылке кликнуться - нам же не нужна перезагрузка страницы? return false; }) }) </script> </head> <body> <div class="container"> [[*content]] <p>Для AJAX загрузки комментариев нажмите на кнопку:</p> <!-- Ссылка с нужным классом и data - атрибутом, с действием --> <a href="#" class="ajax_link btn" data-thread="blog-post-11"><i class="icon-th-list"></i> Показать комментарии</a> <hr> <!-- html элемент для вставки ответа от php --> <div id="result"></div> </div> </body> </html> Вот и все!