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, все будут работать независимо.
Пример реализации (будет жить до вечера) можно посмотреть тут
Надеюсь кому то пригодится)

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
не не не...
Чикин Артур
Тогда да, возможно кэш страницы берется с параметрами пагинации которая не соответствует действительности. Тогда для каждого вызова нужно сделать так:

[[!AjaxSnippet?
&snippet=`pdoPage`
&element=`msProducts`
&tpl=`tpl.msProducts.row`
&limit=`3`
&parents=`4`
&page=`[[!geturi]]` 
&wrapper=`tpl.ajax`
&cache_key=`blablabla1111`
]] 
и

[[!AjaxSnippet?
&snippet=`pdoPage`
&element=`msProducts`
&tpl=`tpl.msProducts.row`
&limit=`3`
&parents=`4`
&page=`[[!geturi]]` 
&wrapper=`tpl.ajax`
&cache_key=`blablabla232323`
]] 
смотри мы обновляем страницу с параметрами в адр.строке
http://s5339.tefile.modx.pro/?page2=6
но запрос вот какой идет http://joxi.ru/Ci8jUxjKTJDVKaaE9Ho и потом сколько не пытайся получить пагинацию 1 - он выдаст ту страницу что была при обновлении. cache_key тут не поможет
короче как я понял если бы pdoPage не редиректил с ?page=1 на просто страницу, то все бы работало)))
Чикин Артур
Писать Василию хотелку что бы добавил параметр для отключения редиректа.
Да я боюсь))) я помню как я Василия подначивал что этого редиректа нет)))
Чикин Артур
Ну или тогда использовать # в урл. Как на одном из проектов в SimpleDream.ru сделали. Смотреть тут: http://gsgarden.ru/
Пощелкай по ссылкам и по обновляй страницу с #/news/ к примеру.
Да, как я и предполагал... Сменил предел с 1 на 0 и все заработало.
if (isset($_REQUEST[$pageVarKey]) && (!is_numeric($_REQUEST[$pageVarKey]) || $_REQUEST[$pageVarKey] <= 0)) {
    return $pdoPage->redirectToFirst();
Возможно есть более изящное решение...
Василий Наумкин
Ха-ха!
Посмотри исходники mSearch2 - там отлично работает ajax пагинация с прямыми адресами, редирект не мешает.
Смысл в том, чтобы при клике по ссылке выделить из неё номер страницы и отправить на сервер. Если номера нет - то это страница 1.
У меня с таким же смыслом, если номера нет - страница 1.

if (!parseInt(pagenum)) {
        pagenum=1;
        Hash.remove(pagination); 
        url = url+"?"+pagination+"="+pagenum; 
    } 
Но пока в pdoPage не внес изменения - грузилась кешированая страница с первого запроса.
мне так кажется что дело в этом -
$key = sha1(serialize($scriptProperties));
фигню написал
Классно =) как всегда спасибо)!
книжку скачал по JavaScript. Начал читать, пока только вступление осилил и переменные))). Сильно не ругайте за код... Попробовал реализовать бесконечную прокрутку аналогичным образом с помощью Ajaxsnippet. код тут - https://github.com/vgrish/ajaxscroll Работает как то так - http://s5354.tefile.modx.pro/
Чикин Артур
Круто, может твои наработки включат в комплект к AjaxSnippet из коробки.
Марк Валерич
а можно ли сделать то же самое, но еще докрутить автооткрытие page2, page3 при пролистывание товара вниз? что-то на подобии vk, когда листаешь страницу вниз?
Это как раз то, что я долго искал. Но к сожалению, я не смог настроить должным образом. Все скрипты подключаю, сниппеты создаю и компоненты устанавливаю, но оно не хочет работать. Вот пример страницы http://mensales.ru/test/ . Помогите разобраться, пожалуйста.
Марк Валерич
если честно, то проверил в мозиле и ян.бр и необходимо все таки нажимать на кнопку, а я хотел узнать, можно ли без нажима....
Может у меня траблы, но просмотрев gif, вроде бы увидел, что там есть автооткрытие..... но сам не увидел((((
Ну если честно то может и у меня траблы, а может у вас экран огромный, и поэтому прокрутка не срабатывает... сейчас товаров больше закину - должно тогда включится...
Марк Валерич
Вот сейчас работает))) Спасибо)))
bezumkin.ru
Личный сайт Василия Наумкина
Прямой эфир
Василий Наумкин
23.12.2024, 05:33:00
В MODX сначала создали проблему, автоматически генерируя адреса, а потом "решили" заморозкой. Так ч...
Дмитрий
14.12.2024, 09:10:38
Василий, прошу прощения, тупанул, не разобрался сразу. Фреймворк отличный! "Чистый лист" на vue, рис...
Василий Наумкин
05.12.2024, 20:01:14
В итоге основная ошибка была в неправильном общем root в Nginx, из-за чего запросы не улетали на фай...
Василий Наумкин
22.11.2024, 03:33:54
Спасибо!
inna
06.11.2024, 15:47:13
Да. Все работает. Спасибо.
Василий Наумкин
01.07.2024, 11:56:41
Да, верно, именно так. А в контроллере, скорее всего, ловить данные методом post.
Василий Наумкин
26.06.2024, 09:38:15
О, точно, вылезает если не залогинен. Спасибо, исправил!
Василий Наумкин
09.04.2024, 04:45:01
> Ошибка 500 Это не похоже на ошибку Nginx, это скорее всего ошибка PHP - надо смотреть его логи. ...
Василий Наумкин
20.03.2024, 21:21:52
Volledig!
Андрей
14.03.2024, 13:47:10
Василий! Как всегда очень круто! Моё почтение!
Уровни подписки
Спасибо!
500 ₽ в месяц
Эта подписка ничего не даёт, просто возможность сказать спасибо за мои заметки. Подписчики отмечаются зелёненьким цветом в комментариях.
Большое спасибо!
1 000 ₽ в месяц
И эта подписка не даёт ничего, кроме оранжевого цвета в комментариях и возможности сказать спасибо, но уже большое!