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, все будут работать независимо.

Пример реализации (будет жить до вечера) можно посмотреть тут

Надеюсь кому то пригодится)

← Предыдущая заметка
Уникальное поле профиля пользователя
Следующая заметка →
Собственная маршрутизация в MODX
Комментарии (28)
bezumkinВасилий Наумкин
14.03.2014 11:20

Нужно бы еще подключить сюда прямые ссылки через Hystory Api и получится отличное решение.

ВолодянВолодя
14.03.2014 16:55

Да я попробовал , все получилось, но есть одна проблема! код тут - https://gist.github.com/vgrish/9547112 Попробуй перейди на какую нибудь страницу пагинации. Затем обновить страничку и перейти на страницу пагинации №1. Ajaxsnippet получит ее из кеша...или хз в чем дело , но получаем уже не первую страницу... Смотреть тут - http://s5322.tefile.modx.pro/ayaks-snippet-history-api.html

ВолодянВолодя
14.03.2014 17:07

Беда , сайт удалили)))

ВолодянВолодя
14.03.2014 20:01

повторил тут - http://s5339.tefile.modx.pro/ Надеюсь на подсказку , в чем же дело?

Чикин Артур
14.03.2014 20:09

Первый вызов не срабатывает

ВолодянВолодя
14.03.2014 20:11

он срабатывает, но отдает контент первого вызова при обновлении страницы. Скорее всего дело в кешировании и плагине

Чикин Артур
14.03.2014 20:11

Или в 2 вызове и var.key

ВолодянВолодя
14.03.2014 20:15

не не не...

Чикин Артур
14.03.2014 20:27

Тогда да, возможно кэш страницы берется с параметрами пагинации которая не соответствует действительности. Тогда для каждого вызова нужно сделать так:


[[!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`
]] 
ВолодянВолодя
14.03.2014 20:33

смотри мы обновляем страницу с параметрами в адр.строке

http://s5339.tefile.modx.pro/?page2=6

но запрос вот какой идет http://joxi.ru/Ci8jUxjKTJDVKaaE9Ho и потом сколько не пытайся получить пагинацию 1 - он выдаст ту страницу что была при обновлении. cache_key тут не поможет

ВолодянВолодя
14.03.2014 20:52

короче как я понял если бы pdoPage не редиректил с ?page=1 на просто страницу, то все бы работало)))

Чикин Артур
14.03.2014 20:58

Писать Василию хотелку что бы добавил параметр для отключения редиректа.

ВолодянВолодя
14.03.2014 20:59

Да я боюсь))) я помню как я Василия подначивал что этого редиректа нет)))

Чикин Артур
14.03.2014 21:03

Ну или тогда использовать # в урл. Как на одном из проектов в SimpleDream.ru сделали. Смотреть тут: http://gsgarden.ru/

Пощелкай по ссылкам и по обновляй страницу с #/news/ к примеру.

bezumkinВасилий Наумкин
15.03.2014 06:04

Ха-ха!

Посмотри исходники mSearch2 - там отлично работает ajax пагинация с прямыми адресами, редирект не мешает.

Смысл в том, чтобы при клике по ссылке выделить из неё номер страницы и отправить на сервер. Если номера нет - то это страница 1.

ВолодянВолодя
15.03.2014 09:09

У меня с таким же смыслом, если номера нет - страница 1.


if (!parseInt(pagenum)) {
        pagenum=1;
        Hash.remove(pagination); 
        url = url+"?"+pagination+"="+pagenum; 
    } 

Но пока в pdoPage не внес изменения - грузилась кешированая страница с первого запроса.

ВолодянВолодя
15.03.2014 09:42

мне так кажется что дело в этом -

$key = sha1(serialize($scriptProperties));
ВолодянВолодя
15.03.2014 09:57

фигню написал

ВолодянВолодя
14.03.2014 23:54

Да, как я и предполагал... Сменил предел с 1 на 0 и все заработало.

if (isset($_REQUEST[$pageVarKey]) && (!is_numeric($_REQUEST[$pageVarKey]) || $_REQUEST[$pageVarKey] <= 0)) {
    return $pdoPage->redirectToFirst();

Возможно есть более изящное решение...

Yana V
14.03.2014 11:53

Классно =) как всегда спасибо)!

ВолодянВолодя
17.03.2014 13:47

книжку скачал по JavaScript. Начал читать, пока только вступление осилил и переменные))). Сильно не ругайте за код... Попробовал реализовать бесконечную прокрутку аналогичным образом с помощью Ajaxsnippet. код тут - https://github.com/vgrish/ajaxscroll Работает как то так - http://s5354.tefile.modx.pro/

Чикин Артур
17.03.2014 15:35

Круто, может твои наработки включат в комплект к AjaxSnippet из коробки.

997142Марк Валерич
17.03.2014 15:48

а можно ли сделать то же самое, но еще докрутить автооткрытие page2, page3 при пролистывание товара вниз? что-то на подобии vk, когда листаешь страницу вниз?

ВолодянВолодя
17.03.2014 16:00
Mihail
19.03.2014 16:41

Это как раз то, что я долго искал. Но к сожалению, я не смог настроить должным образом. Все скрипты подключаю, сниппеты создаю и компоненты устанавливаю, но оно не хочет работать. Вот пример страницы http://mensales.ru/test/ . Помогите разобраться, пожалуйста.

997142Марк Валерич
17.03.2014 16:06

если честно, то проверил в мозиле и ян.бр и необходимо все таки нажимать на кнопку, а я хотел узнать, можно ли без нажима....

Может у меня траблы, но просмотрев gif, вроде бы увидел, что там есть автооткрытие..... но сам не увидел((((

ВолодянВолодя
17.03.2014 16:12

Ну если честно то может и у меня траблы, а может у вас экран огромный, и поэтому прокрутка не срабатывает... сейчас товаров больше закину - должно тогда включится...

997142Марк Валерич
17.03.2014 16:22

Вот сейчас работает))) Спасибо)))

bezumkin
Василий Наумкин
09.04.2024 01:45
Ошибка 500 Это не похоже на ошибку Nginx, это скорее всего ошибка PHP - надо смотреть его логи. Во...
futuris
Futuris
04.04.2024 05:56
Я просто немного запутался. Когда в абзаце &quot;Vesp/Core&quot; ты пишешь про &quot;новый trait Fil...
bezumkin
Василий Наумкин
20.03.2024 18:21
Volledig!
Андрей
14.03.2024 10:47
Василий! Как всегда очень круто! Моё почтение!
russelgal
russel gal
09.03.2024 17:17
А этот стоило написать хотя бы затем, чтобы получить комментарий от юзера, который ничего не писал ...
inetlover
Александр Наумов
27.01.2024 00:06
Василий, спасибо! Извини, тупанул.
bezumkin
Василий Наумкин
22.01.2024 04:43
Давай-давай!
bezumkin
Василий Наумкин
24.12.2023 11:26
Спасибо!
bezumkin
Василий Наумкин
27.11.2023 02:43
Ура!
bezumkin
Василий Наумкин
25.11.2023 08:30
Vesp тянет 2 зависимости: vesp-frontent для фронта и vesp-core для бэкенда. Их можно обновлять, но э...