Урок 21. AJAX загрузка Quip комментариев
Попробуем разобраться сегодня как загружать комментарии используя Quip, AJAX и прямые руки. Для начала установите компонент Quip, если он ещё не установлен.
Создадим ресурс с произвольным именем, шаблоном _Blank (!) и назначим ему псевдоним (alias) как ajaxgetcomments, переходим на вкладку Настройки (Settings) и ставим чекбокс Заморозить URI (Freeze URI) и выставляем значение ajaxgetcomments без ".html".
Вставляем в поле "содержимое" (content) некешируемый вызов сниппета ajaxGetComments. Получается следующая картина:
Давайте теперь создадим сам сниппет ajaxGetComments. Этот сниппет - всего лишь модифицированный сниппет Quip, который будет принимать параметр thread от AJAX вызова и выдавать соответствующий тред комментариев. Скопируем код сниппета Quip и добавим туда сверху код, принимающий параметр thread (нужный тред) и передающий его в $properties в виде массива после инициализации контекста:
Проверим теперь работу сниппета: напишем в адресной строке браузера запрос, вида: http://mysite.com/ajaxgetcomments?thread=mythread, где mythread - это ИД треда, для меня строка проверки работы была https://modx.ws/demo/ajaxgetcomments?thread=blog-post-11
ИД треда можно найти в менеджере в Quip компоненте, смотрим изображение:
Итак, если сниппет работает как нужно, то меняем запрос 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.
Вот пожалуй и всё. Как обычно задавайте вопросы.
Oct 19 2012 AJAX Quip уроки MODx Revolution jquery Виктор Матушевский
Алексей
19.10.2012 07:56А зачем копировать код Quip, ведь можно проще:
$thread = ......
return $modx->runSnippet('Quip', array('thread'=>$thread));
И все.
Viktor Minator
19.10.2012 11:02Да. Это даже более правильный вариант. Но я вызывал Quip из другого контекста, поэтому у меня $quip->initialize('web'); Сам демо-шаблон находится в demo контексте.
Александр Наумов
21.10.2012 19:34Спасибо, очень полезная статья, все разжевано!
Как раз сейчас разбираюсь c Ajax-ом.
Яна Вострякова
30.10.2012 18:56а как сделать ajax добавление комментария ? без перезагрузки страницы?
делала так:
$('form',this).bind('submit',function(e)
{
$.ajax({
url: url,
type: "POST",
data: {thread: thread, parent: parent, name: name, email: email, comment: comment},
dataType: "html",
success:function(data)
{
}
});
return false;
});
но не работает =(
Пауло Тигиев
01.11.2012 13:23Здравтвуйте.
Чуть чуть не в тему, но у меня возникла проблема с выводом аватара пользователя в комментариях. Постоянно выводиться gravatarIcon. Пользователи логиняться как и вас на сайте через логинзу.
Sergey Namestnikov
10.03.2013 08:52Хорошая статья
Алексей
01.08.2013 18:10Кто разобрался с добавлением через ajax коментов? опишите, пожалуйста! никак не получается постить через QuipReply
Bjorn Matveychenko
28.08.2013 17:08Алексей, делаете аякс запрос с пост данными странице на которой вызывается quipreply
типа такого -` &recaptcha=`0` &requireAuth=`1`