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 15:20

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

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

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

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

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

ВолодянВолодя
15.03.2014 00:01

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

Чикин Артур
15.03.2014 00:09

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

ВолодянВолодя
15.03.2014 00:11

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

Чикин Артур
15.03.2014 00:11

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

ВолодянВолодя
15.03.2014 00:15

не не не...

Чикин Артур
15.03.2014 00: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`
]] 
ВолодянВолодя
15.03.2014 00:33

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

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

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

ВолодянВолодя
15.03.2014 00:52

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

Чикин Артур
15.03.2014 00:58

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

ВолодянВолодя
15.03.2014 00:59

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

Чикин Артур
15.03.2014 01:03

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

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

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

Ха-ха!

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

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

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

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


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

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

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

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

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

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

ВолодянВолодя
15.03.2014 03:54

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

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

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

Yana V
14.03.2014 15:53

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

inetlover
Александр Наумов
27.09.2022 22:16
Василий, спасибо тебе большое! Обалдеть, как круто!
Сергей Лелеко
26.09.2022 10:22
Тоже задействовал! Прекрасная функция!
inetlover
Александр Наумов
19.09.2022 11:56
Компонента Sidebar у Bootstrap нет, значит нужны только стили из Bootstrap-Vue @import &#39;~boot...
bezumkin
Василий Наумкин
13.08.2022 14:41
неужели, все глобальное, так просто можно взять и сделать Да, именно так. Мелкие затыки, конечно ж...
bezumkin
Василий Наумкин
13.08.2022 11:18
Killed говорит, что сервер прибивает задачу, скорее всего у провайдера есть какие-то лимиты по нагру...
bezumkin
Василий Наумкин
11.08.2022 18:46
Класс!! Рад, что тебе нравится! нужно добавить @click=&quot;showCart = true&quot; в: Спасибо, попра...
bezumkin
Василий Наумкин
09.08.2022 14:27
На здоровье!
inetlover
Александр Наумов
30.07.2022 22:58
Василий, спасибо большое! Первый вариант помог, не было вот этой настройки: php_value[sys_temp_dir].
bezumkin
Василий Наумкин
06.07.2022 17:06
Базовый Vue, базовый ES 6: импорт-экспорт модулей, вот это всё. Если что-то будет непонятно - просто...
bezumkin
Василий Наумкин
06.07.2022 14:19
Спасибо, что читаешь!