Урок 21. AJAX загрузка Quip комментариев

Попробуем разобраться сегодня как загружать комментарии используя Quip, AJAX и прямые руки. Для начала установите компонент Quip, если он ещё не установлен.

Создадим ресурс с произвольным именем, шаблоном _Blank (!) и назначим ему псевдоним (alias) как ajaxgetcomments, переходим на вкладку Настройки (Settings) и ставим чекбокс Заморозить URI (Freeze URI) и выставляем значение ajaxgetcomments без ".html".

Вставляем в поле "содержимое" (content) некешируемый вызов сниппета ajaxGetComments. Получается следующая картина:

Ресурс с псевдонимом ajaxgetcomments

Давайте теперь создадим сам сниппет ajaxGetComments. Этот сниппет - всего лишь модифицированный сниппет Quip, который будет принимать параметр thread от AJAX вызова и выдавать соответствующий тред комментариев. Скопируем код сниппета Quip и добавим туда сверху код, принимающий параметр thread (нужный тред) и передающий его в $properties в виде массива после инициализации контекста:

Мы проверим вначале работу сниппета и, если всё сделали правильно и получаем комментарии, то поменяем GET на POST.

Проверим теперь работу сниппета: напишем в адресной строке браузера запрос, вида: http://mysite.com/ajaxgetcomments?thread=mythread, где mythread - это ИД треда, для меня строка проверки работы была http://modx.ws/demo/ajaxgetcomments?thread=blog-post-11

ИД треда можно найти в менеджере в Quip компоненте, смотрим изображение:

Комментарии в Quip MODX Revoluion

Итак, если сниппет работает как нужно, то меняем запрос GET на POST и добавляем вверху сниппета ajaxGetComments для проверки наличия AJAX-запроса следующую строчку:

   if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;}

Создадим код кнопки "Показать комментарии", которая будет содержать данные о треде вывода комментариев в атрибуте data-thread. Вставляем его в том месте шаблона, где планируем выводить комментарии. Код кнопки:

Создадим JS-код, который будет обрабатывать нажатие кнопки, брать данные о треде из атрибута data-thread и отсылать его в post-запросе на нужный нам URL:

Вставляем данный код после вызова библиотеки jQuery (на момент написания статьи - 1.8.2). Добавляем необходимые стили и в итоге получаем следующий код шаблона:

Что нужно читать, чтобы понять как я это сделал:

  • Основы Ajax статья Василия Наумкина о AJAX в MODX Revolution. Расширяет горизонты =).
  • Документация по Quip. - тут можно почитать и узнать какие дополнительные параметры можно передавать-получать для AJAX запроса.
  • HTML5 data-атрибуты (data-*) пожалуй самая удачная статья по data-атрибутам, есть одна на Хабре, но эта была самой понятной.
  • AJAX в MODX Revolution когда-то я уже переводил статьи о AJAX в MODX Revolution.

Demo

Вот пожалуй и всё. Как обычно задавайте вопросы.