AjaxSnippet и аякс пагинация
Вызываем AjaxSnippet на странице
[[!AjaxSnippet?
&snippet=`pdoPage`
&element=`msProducts`
&tpl=`tpl.msProducts.row`
&limit=`3`
&parents=`4`
&page=`[[!geturi]]`
&wrapper=`tpl.ajax`
]]
Сниппет geturi
$filter = $_GET['page'];
return $filter;
Обертка для вывода tpl.ajax
<div class="pagin [[+key]]"></div>
<div id="[[+key]]" class="ajax-snippet">
<img src=" " class="as_spinner" style="width:32px;margin:auto;display:block;">
</div>
<div class="pagin [[+key]]"></div>
скрипт для пагинации
<script>
$(document).on('as_complete', document, function(e,d) {
$(".pagin."+d["key"]).append(d["pagination"]);
$(document).on('click', '.'+d["key"]+' .pagination a', function(e) {
e.preventDefault();
var url = $(this).attr('href');
//console.log(url);
$.post(url, {as_action: d["key"]}, function(response) {
if (typeof response.output !== "undefined") {
$('.ajax-snippet#'+d["key"]).html(response.output);
$(".pagin."+d["key"]).html(response.pagination);
}
}, "json");
});
});
</script>
Можно использовать несколько вызовов Ajaxsnippet, все будут работать независимо.
Пример реализации (будет жить до вечера) можно посмотреть тут
Надеюсь кому то пригодится)
0
👍
👎
❤️
🔥
😮
😢
😀
😡
4 249
14.03.2014 11:12:35
28 комментариев
Нужно бы еще подключить сюда прямые ссылки через Hystory Api и получится отличное решение.
Да я попробовал , все получилось, но есть одна проблема! код тут - https://gist.github.com/vgrish/9547112 Попробуй перейди на какую нибудь страницу пагинации. Затем обновить страничку и перейти на страницу пагинации №1. Ajaxsnippet получит ее из кеша...или хз в чем дело , но получаем уже не первую страницу... Смотреть тут - http://s5322.tefile.modx.pro/ayaks-snippet-history-api.html
Беда , сайт удалили)))
повторил тут - http://s5339.tefile.modx.pro/ Надеюсь на подсказку , в чем же дело?
Чикин Артур
Первый вызов не срабатывает
он срабатывает, но отдает контент первого вызова при обновлении страницы. Скорее всего дело в кешировании и плагине
Чикин Артур
Или в 2 вызове и var.key
не не не...
Чикин Артур
Тогда да, возможно кэш страницы берется с параметрами пагинации которая не соответствует действительности. Тогда для каждого вызова нужно сделать так:
и
смотри мы обновляем страницу с параметрами в адр.строке
но запрос вот какой идет http://joxi.ru/Ci8jUxjKTJDVKaaE9Ho и потом сколько не пытайся получить пагинацию 1 - он выдаст ту страницу что была при обновлении. cache_key тут не поможет
короче как я понял если бы pdoPage не редиректил с ?page=1 на просто страницу, то все бы работало)))
Чикин Артур
Писать Василию хотелку что бы добавил параметр для отключения редиректа.
Да я боюсь))) я помню как я Василия подначивал что этого редиректа нет)))
Чикин Артур
Ну или тогда использовать # в урл. Как на одном из проектов в SimpleDream.ru сделали. Смотреть тут: http://gsgarden.ru/
Пощелкай по ссылкам и по обновляй страницу с #/news/ к примеру.
Да, как я и предполагал... Сменил предел с 1 на 0 и все заработало.
Возможно есть более изящное решение...
Ха-ха!
Посмотри исходники mSearch2 - там отлично работает ajax пагинация с прямыми адресами, редирект не мешает.
Смысл в том, чтобы при клике по ссылке выделить из неё номер страницы и отправить на сервер. Если номера нет - то это страница 1.
У меня с таким же смыслом, если номера нет - страница 1.
Но пока в pdoPage не внес изменения - грузилась кешированая страница с первого запроса.
мне так кажется что дело в этом -
фигню написал
Yana V
Классно =) как всегда спасибо)!
книжку скачал по JavaScript. Начал читать, пока только вступление осилил и переменные))). Сильно не ругайте за код... Попробовал реализовать бесконечную прокрутку аналогичным образом с помощью Ajaxsnippet. код тут - https://github.com/vgrish/ajaxscroll Работает как то так - http://s5354.tefile.modx.pro/
Чикин Артур
Круто, может твои наработки включат в комплект к AjaxSnippet из коробки.
а можно ли сделать то же самое, но еще докрутить автооткрытие page2, page3 при пролистывание товара вниз? что-то на подобии vk, когда листаешь страницу вниз?
а щас не то? http://recordit.co/m2hxR0i4MB.gif
Mihail
Это как раз то, что я долго искал. Но к сожалению, я не смог настроить должным образом. Все скрипты подключаю, сниппеты создаю и компоненты устанавливаю, но оно не хочет работать. Вот пример страницы http://mensales.ru/test/ . Помогите разобраться, пожалуйста.
если честно, то проверил в мозиле и ян.бр и необходимо все таки нажимать на кнопку, а я хотел узнать, можно ли без нажима....
Может у меня траблы, но просмотрев gif, вроде бы увидел, что там есть автооткрытие..... но сам не увидел((((
Ну если честно то может и у меня траблы, а может у вас экран огромный, и поэтому прокрутка не срабатывает... сейчас товаров больше закину - должно тогда включится...
Вот сейчас работает))) Спасибо)))
bezumkin.ru
Личный сайт Василия Наумкина
Прямой эфир
Дмитрий
08.02.2025 09:09:01
Спасибо за ответ. Есть желание разобраться самому. Прочитал все ваши статьи и понял, что VESP перспе...
Василий Наумкин
04.02.2025 19:27:08
Я таким давно не занимаюсь и с MODX не работаю.
Попробуйте обратиться к ребятам с modx.pro.
Василий Наумкин
23.12.2024 05:33:00
В MODX сначала создали проблему, автоматически генерируя адреса, а потом "решили" заморозкой.
Так ч...
Дмитрий
14.12.2024 09:10:38
Василий, прошу прощения, тупанул, не разобрался сразу. Фреймворк отличный! "Чистый лист" на vue, рис...
Василий Наумкин
05.12.2024 20:01:14
В итоге основная ошибка была в неправильном общем root в Nginx, из-за чего запросы не улетали на фай...
Василий Наумкин
01.07.2024 11:56:41
Да, верно, именно так.
А в контроллере, скорее всего, ловить данные методом post.
Василий Наумкин
26.06.2024 09:38:15
О, точно, вылезает если не залогинен.
Спасибо, исправил!
Уровни подписки
Спасибо!
500 ₽ в месяц
Эта подписка ничего не даёт, просто возможность сказать спасибо за мои заметки. Подписчики отмечаются зелёненьким цветом в комментариях.
Большое спасибо!
1 000 ₽ в месяц
И эта подписка не даёт ничего, кроме оранжевого цвета в комментариях и возможности сказать спасибо, но уже большое!