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 211
14.03.2014, 11:12:35
28 комментариев
14.03.2014, 15:20:44
Нужно бы еще подключить сюда прямые ссылки через Hystory Api и получится отличное решение.
14.03.2014, 20:55:34
Да я попробовал , все получилось, но есть одна проблема! код тут - https://gist.github.com/vgrish/9547112 Попробуй перейди на какую нибудь страницу пагинации. Затем обновить страничку и перейти на страницу пагинации №1. Ajaxsnippet получит ее из кеша...или хз в чем дело , но получаем уже не первую страницу... Смотреть тут - http://s5322.tefile.modx.pro/ayaks-snippet-history-api.html
14.03.2014, 21:07:42
Беда , сайт удалили)))
15.03.2014, 00:01:32
повторил тут - http://s5339.tefile.modx.pro/ Надеюсь на подсказку , в чем же дело?
Чикин Артур
15.03.2014, 00:09:35
Первый вызов не срабатывает
15.03.2014, 00:11:19
он срабатывает, но отдает контент первого вызова при обновлении страницы. Скорее всего дело в кешировании и плагине
Чикин Артур
15.03.2014, 00:11:52
Или в 2 вызове и var.key
15.03.2014, 00:15:22
не не не...
Чикин Артур
15.03.2014, 00:27:53
Тогда да, возможно кэш страницы берется с параметрами пагинации которая не соответствует действительности. Тогда для каждого вызова нужно сделать так:
и
15.03.2014, 00:33:46
смотри мы обновляем страницу с параметрами в адр.строке
но запрос вот какой идет http://joxi.ru/Ci8jUxjKTJDVKaaE9Ho и потом сколько не пытайся получить пагинацию 1 - он выдаст ту страницу что была при обновлении. cache_key тут не поможет
15.03.2014, 00:52:31
короче как я понял если бы pdoPage не редиректил с ?page=1 на просто страницу, то все бы работало)))
Чикин Артур
15.03.2014, 00:58:39
Писать Василию хотелку что бы добавил параметр для отключения редиректа.
15.03.2014, 00:59:40
Да я боюсь))) я помню как я Василия подначивал что этого редиректа нет)))
Чикин Артур
15.03.2014, 01:03:32
Ну или тогда использовать # в урл. Как на одном из проектов в SimpleDream.ru сделали. Смотреть тут: http://gsgarden.ru/
Пощелкай по ссылкам и по обновляй страницу с #/news/ к примеру.
15.03.2014, 03:54:19
Да, как я и предполагал... Сменил предел с 1 на 0 и все заработало.
Возможно есть более изящное решение...
15.03.2014, 10:04:01
Ха-ха!
Посмотри исходники mSearch2 - там отлично работает ajax пагинация с прямыми адресами, редирект не мешает.
Смысл в том, чтобы при клике по ссылке выделить из неё номер страницы и отправить на сервер. Если номера нет - то это страница 1.
15.03.2014, 13:09:15
У меня с таким же смыслом, если номера нет - страница 1.
Но пока в pdoPage не внес изменения - грузилась кешированая страница с первого запроса.
15.03.2014, 13:42:17
мне так кажется что дело в этом -
15.03.2014, 13:57:58
фигню написал
Yana V
14.03.2014, 15:53:18
Классно =) как всегда спасибо)!
17.03.2014, 17:47:57
книжку скачал по JavaScript. Начал читать, пока только вступление осилил и переменные))). Сильно не ругайте за код... Попробовал реализовать бесконечную прокрутку аналогичным образом с помощью Ajaxsnippet. код тут - https://github.com/vgrish/ajaxscroll Работает как то так - http://s5354.tefile.modx.pro/
Чикин Артур
17.03.2014, 19:35:18
Круто, может твои наработки включат в комплект к AjaxSnippet из коробки.
17.03.2014, 19:48:10
а можно ли сделать то же самое, но еще докрутить автооткрытие page2, page3 при пролистывание товара вниз? что-то на подобии vk, когда листаешь страницу вниз?
17.03.2014, 20:00:28
а щас не то? http://recordit.co/m2hxR0i4MB.gif
Mihail
19.03.2014, 20:41:15
Это как раз то, что я долго искал. Но к сожалению, я не смог настроить должным образом. Все скрипты подключаю, сниппеты создаю и компоненты устанавливаю, но оно не хочет работать. Вот пример страницы http://mensales.ru/test/ . Помогите разобраться, пожалуйста.
17.03.2014, 20:06:16
если честно, то проверил в мозиле и ян.бр и необходимо все таки нажимать на кнопку, а я хотел узнать, можно ли без нажима....
Может у меня траблы, но просмотрев gif, вроде бы увидел, что там есть автооткрытие..... но сам не увидел((((
17.03.2014, 20:12:23
Ну если честно то может и у меня траблы, а может у вас экран огромный, и поэтому прокрутка не срабатывает... сейчас товаров больше закину - должно тогда включится...
17.03.2014, 20:22:53
Вот сейчас работает))) Спасибо)))
bezumkin.ru
Личный сайт Василия Наумкина
Прямой эфир
Василий Наумкин
01.07.2024, 11:56:41
Да, верно, именно так.
А в контроллере, скорее всего, ловить данные методом post.
Василий Наумкин
26.06.2024, 09:38:15
О, точно, вылезает если не залогинен.
Спасибо, исправил!
Василий Наумкин
09.04.2024, 04:45:01
> Ошибка 500
Это не похоже на ошибку Nginx, это скорее всего ошибка PHP - надо смотреть его логи.
...
russel gal
09.03.2024, 20:17:18
> А этот стоило написать хотя бы затем, чтобы получить комментарий от юзера, который ничего не писал...
Александр Наумов
27.01.2024, 03:06:18
Василий, спасибо!
Извини, тупанул.