Урок 29. AJAX загрузка ресурсов
Разберёмся сегодня с 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=""></a></h3>
<p></p>
<p></p>
</div>
Кнопка "Показать ещё":
<button class="more" data-action="getResources" data-tpl="tpl.getResources.row" data-parents="233">Показать ещё</button>
Создадим скрипт, который будет обрабатывать нажатие кнопки и отправлять post-запрос, в нём укажем следующие параметры:
Параметр | Значение | Что обозначает |
---|---|---|
offset | 0 | Начальный сдвиг равен 0 |
.post(URL,data,...)) | 'https://modx.ws/demo/ajax' | URL ресурса, отвечающего на AJAX запросы |
limit | 5 | По-умолчанию лимит равен 5, поэтому сдвиг будет offset+=5 |
<!-- Наш скрипт запроса и обработки -->
<script type="text/javascript">
$(document).ready(function() {
var offset = 0;
// Вешаем обработчик события "клик" на кнопку с классом .more
$('button.more').click(function() {
// Ajax post-запрос к странице, выдающей ресурсы (в ней сниппет ajaxResources)
var data = $(this).data();
$.post('https://modx.ws/demo/ajax', data, function(data) {
offset +=5;
// Выдаем ответ
$('#result').append(data);
$('button.more').data('offset', offset);
})
// В случае если у вас вместо кнопки ссылка - a href="#", то расскоментируйте строку ниже
// return false;
})
})
</script>
Исходя из того, что параметр 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);
}
Aug 09 2013
AJAX getResources
Виктор Матушевский
Татьяна Фадеева
13.08.2013 10:03Добрый день. Хорошая статья. Только куда нужно вставлять и кнопку. Я вставила в отдельный чанк в отдельном ресурсе, где у меня должны подгружаться статьи, но ничего не работает, даже кнопка не нажимается, выглядит как надпись обычная.
Татьяна Фадеева
13.08.2013 12:44Я разобралась. Проблема в том,что в чанке вывода новости у меня присутствует Gallery. Поэтому ничего не выводилось. Можно как-нибудь решить этот вопрос,чтобы картинки из Gallery тоже выводились?
Татьяна Фадеева
13.08.2013 12:46И еще хотелось бы,чтобы изначально было выведено примерно 6 новостей, а уже дальше по нажатию кнопки остальные выводились.Как это можно сделать?
Viktorminator
13.08.2013 14:02чтобы выводилось вначале 6 новостей, выводите их обычным вызовом getResources.
А там где должен AJAX подгружать в джаваскрипте выставляете начальный параметр offset = 6 и его дальше +6 или сколько нужно добавляете...
Александр Пучков
03.08.2014 15:47Виктор, приветствую!
Сделал по вашему совету сначала простой вызов getResources, а дальше ajax вызовы по нажатию кнопки со стартовым offset=6 и шагом +6. Но почему-то первый ajax вызов повторяет результат простого вызова. А дальше уже нормально с шагом 6 выводится. Можете подсказать в чем может быть ошибка?
Viktorminator
13.08.2013 14:04как с Gallery поступить - не знаю.
Татьяна Фадеева
13.08.2013 16:25Спасибо за ответ. С первой частью сама разобралась, а вот с Gallary проблема.
Татьяна Фадеева
13.08.2013 16:35Когда пишу вывести 6 и +6 он выводит с повторами. Только что заметила этот косяк. Выводит 6, потом еще раз этих же самых 6, а потом уже как надо остальные новости. У Вас есть идеи как это исправить? А то я уже голову всю сломала.
Viktorminator
13.08.2013 17:13в кнопке аттрибут data-offset=""
Татьяна Фадеева
14.08.2013 09:12Это помогло обойтись без повторов, только вот тогда он выводит мне новости с самого начала, а мне нужно,чтобы первые 6 он не выводил, я их изначально вывела getResources. А если ставлю data-offset="6", то получается с повторами. Это можно как-нибудь исправить?
Viktorminator
14.08.2013 09:56Напишите мне в скайп.
Татьяна Фадеева
14.08.2013 10:06Спасибо за помощь, я во всем разобралась. Еще бы решить проблему с Gallery и будет вообще отлично))
lowkickkz
29.09.2013 22:19а как вы разобрались?)
Александр Пучков
03.08.2014 15:20Привет! Не расскажешь как решили проблему с offset и повторами?
lowkickkz
29.09.2013 21:11Здравствуйте! А как можно чтобы подгружались картинки через phpthumbon и работал снипет ?
Viktor Minator
29.09.2013 21:37добрый вечер. не понял вопроса... в чанк вставьте ваш phpthumbon и всё будет ок.
lowkickkz
29.09.2013 21:56Спасибо разобрался)
мне нужно было вывести анонс, и ТВ поле. оказалось надо было это приписать в ajaxresouces.php
$params['includeContent'] = 1;
$params['includeTVs'] = 1;
Так можно настроить нужный getresouces
творенье на это странице ella.kz/moda-i-stil
Viktor Minator
29.09.2013 22:38getPage там не нужен, используйте только getResources и phpthumbon, а не phpthumbof
Павел
05.10.2013 13:37У вас криво работает: после второго нажатия на "показать еще" вместо очередной статьи вылезает это да еще и без картинки:
29/09/2013
Павел
05.10.2013 13:39странно, код не вставился. В общем, появляется это:
[ [ ! get Page? &element=`getResources` &showHidden=`1` &tpl=`Category` &includeContent=`1` &depth=`2` &hideContainers=`1` &limit=`10` &includeTVs=`1` &processTVs=`1` &pageLimit=`0` &pageNavVar=`page.nav` ] ]
Viktor Minator
05.10.2013 13:44там вообще никакой картинки в демо не должно быть. вы о чем? всё работает.
....а, понял, это вы к верхнему комменту...
Viktor Minator
05.10.2013 13:47и какой-такой getPage? я вызываю getResources!
Стас Сидорюк
03.12.2013 19:12А можете, если не сложно, подсказать вариант с getPage и его плейсхолдером пагинации? Второй день бьюсь, не могу понять в чем дело.
Стас Сидорюк
03.12.2013 19:14Кстади пробовал похожий исходник, с getResources все получается а вот getPage не хочет
Павел
10.12.2013 01:44Виктор, косяк с Get Page не у вас, а у lowkickkz с сайтом ella.kz
Рустам Алимов
14.12.2013 23:17Здравствуйте. Не получается вывести ресурсы подскажите в чем проблема.
На странице в чанке это
Показать ещё
17 - контейнер с вложенными ресурсами для меню не показаны опубликованы.
На странице http://сайт.ру/index.php?id=19 пустой шаблон + вызов сниппета
Сам код сниппета
runSnippet('getResources', $params); break;
}
// Если у нас есть, что отдать на запрос - отдаем и прерываем работу парсера MODX
if (!empty($res)) {
die($res);
}
В консоле запрос постом уходит такой
action getResources
offset 0
parents 17
tpl getDisqus
Отдает пустоту....Хелпаните ребзи(
Viktor Matushevskyi
14.12.2013 23:20Chrome Dev tools - разберитесь, отдавайте GET запросы на нужный ресурс и отлаживайте...
Рустам Алимов
14.12.2013 23:37Get? Аякс вроде по своему запрашивает не?
Ничего не пойму...
Viktor Matushevskyi
14.12.2013 23:52почитайте про ajax. отдаются post или get запросы и принимаются. вот в сниппете ставите приём get запросов и опрашиваете ресурс, например так: site.com/mysnippetpage.html?tpl=someTpl&parents=123&offset=0
Рустам Алимов
14.12.2013 23:59Виктор, если можно ваши координаты скайп или почту аську, что угодно.
Я отблагодарю помощь
Viktor Matushevskyi
15.12.2013 00:14пробуйте сами сделать
Саша Друмс
27.12.2013 11:12Добрый день.
Не могли бы вы подсказать, как можно добавить сортировку, и, например, скрытие контейнеров при ajax запросе? В вашем примере можно настроить только шаблон, родителя и и параметр offset.
Буду очень благодарен. Спасибо.
Саша Друмс
27.12.2013 11:43Добавил в сниппет ajaxResources:
$params['sortby'] = filter_input(INPUT_POST,'sortby');
$params['hidecontainers'] = filter_input(INPUT_POST,'hidecontainers', FILTER_SANITIZE_NUMBER_INT);
К тегу < button data-sortby="menuindex" data-hidecontainers="1" >
Сортировка работает, а контейнеры всё равно выводятся.
Подтолкните к решению, пожалуйста.
Viktor Matushevskyi
27.12.2013 11:56hideContainers
Саша Друмс
27.12.2013 12:29Да я уже все варианты перебрал, hideContainers в том числе, даже isfolder пробовал. Ничего не изменяется. А вывод контейнеров совсем не к месту в выводе статей в блоге :-(
Саша Друмс
27.12.2013 16:59Методом проб и ошибок решил задачу добавлением в скрипт:
var hideContainers = 1;
и
$('button.more').data('hideContainers', hideContainers);
и в сниппет ajaxResources:
$params['hideContainers'] = filter_input(INPUT_POST, 'hideContainers', FILTER_SANITIZE_NUMBER_INT);
Не знаю, логично-ли решение, т.к. я в программировании не очень разбираюсь.
Ещё интересно, как можно сделать кнопку неактивной, если больше нет ресурсов для вывода, или заменить кнопку на текст: «Больше нет ресурсов для вывода.»
Виталий
29.12.2013 21:06Здравствуйте!
Есть ресурсы, которые имеют несколько полей. Есть поле с изображением. На странице с помощью getresources формируется слайдер/карусель, содержащий изображение из ресурса. Необходимо, чтобы при нажатии на изображение под слайдером в блоке выводилось содержимое ресурса .
Как это можно реализовать?
Спасибо
Viktor Matushevskyi
29.12.2013 22:00поменяйте чуть код этого урока и всё выйдет...
Виталий
31.12.2013 11:55Спасибо, попробую)
Начал только знакомство с modx и есть еще небольшой вопрос. Можно ли как-то автоматически заполнить список дополнительного поля (TV) элементами, включающими заголовки определенных ресурсов?
Например, есть группа ресурсов с заголовками: Система1,Система2 и т.д.
Список TV должен включать заголовки: Система1,Система2 и т.д.
Viktor Matushevskyi
31.12.2013 13:07в мануалах tv input types
Виталий
15.01.2014 10:48С получением данных все ок.
Как теперь вывести выбранные элементы на странице?
Посмотрел в админке код checkbox. Там есть INPUT у которого value=URL_LOGO и Label с pagetitle. Получается на странице надо вывести содержимое INPUT и Label. Как это можно сделать?
Viktor Matushevskyi
15.01.2014 12:35jquery
Виталий
15.01.2014 17:58Как это можно реализовать с помощью jquery? попробовал несколько вариантов, не выходит пока. Не удается получить картинку.
Виталий
02.01.2014 17:46Еще раз спасибо, нашел то что нужно.
Вопрос не по теме статьи, но хотелось бы узнать такой момент. Часто возникают трудности с просмотром настроек системы, бесконечная загрузка "Загружается..." Как это можно поправить, пробовал очистку папки кеш, не помогло.
Пауло Тигиев
14.01.2014 14:00Здравствуйте, Виктор!
Спасибо за статью, очень помогли.
Но я столкнулся с проблемой невозможности вывести TV в списке. Добавил:
$params['includeTVs'] = 1;
$params['processTVs'] = 1;
$params['includeContent'] = 1;
Но в на странице выводится лишь:
Пауло Тигиев
14.01.2014 14:01[ [+content] ] и [ [+tv.size] ]
Viktor Matushevskyi
14.01.2014 15:36ошиблись где-то.
hardnn
20.08.2014 22:31Здравствуйте Виктор. А подскажите пож. как можно передать параметр "where".
Пытаюсь сделать алфавитный рубрикатор. В кнопке (а точнее в ссылке) передавать нужно первую букву:
1. У кнопки создаю новый параметр: data-ltr="ж" (где ж - это первая буква в pagetitle ресурсов)
2. В снипете добавляю:
$params['where'] = `["pagetitle LIKE 'ж%' "]` ; - если указать букву, то работает
(возможно синтаксис не верен, пишу по памяти).
А вот как вместо буквы подставить переменную "ltr"? Весь мозг уже сломал, так как PHP не знаю.
Типа: $params['where'] = `["pagetitle LIKE ' ('ltr')%' "]` ; - попробовал разные варианты (скобки, кавычки, добавлял новые переменные, типа $ltr = 'ltr' и т.п.) - не работает.
Подскажите, если не сложно.
hardnn
25.08.2014 18:28Ответ на свой вопрос получил тут:
http://modx-shopkeeper.ru/forum/viewtopic.php?id=3461