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
Предыдущая заметка
Уникальное поле профиля пользователя


Комментарии ()

  1. Василий Наумкин 14 марта 2014, 11:20 # 0
    Нужно бы еще подключить сюда прямые ссылки через Hystory Api и получится отличное решение.
    1. Володя 14 марта 2014, 16:55 # 0
      Да я попробовал, все получилось, но есть одна проблема!
      код тут — gist.github.com/vgrish/9547112
      Попробуй перейди на какую нибудь страницу пагинации. Затем обновить страничку и перейти на страницу пагинации №1.
      Ajaxsnippet получит ее из кеша… или хз в чем дело, но получаем уже не первую страницу…
      Смотреть тут — s5322.test.modx.pro/ayaks-snippet-history-api.html

      1. Володя 14 марта 2014, 17:07 # 0
        Беда, сайт удалили)))
        1. Володя 14 марта 2014, 20:01 # 0
          повторил тут — s5339.test.modx.pro/
          Надеюсь на подсказку, в чем же дело?
          1. Чикин Артур 14 марта 2014, 20:09 # 0
            Первый вызов не срабатывает
            1. Володя 14 марта 2014, 20:11 # 0
              он срабатывает, но отдает контент первого вызова при обновлении страницы.
              Скорее всего дело в кешировании и плагине
              1. Чикин Артур 14 марта 2014, 20:11 # 0
                Или в 2 вызове и var.key
                1. Володя 14 марта 2014, 20:15 # 0
                  не не не…
                  1. Чикин Артур 14 марта 2014, 20:27 # 0
                    Тогда да, возможно кэш страницы берется с параметрами пагинации которая не соответствует действительности. Тогда для каждого вызова нужно сделать так:
                    [[!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`
                    ]] 
                    
                    1. Володя 14 марта 2014, 20:33 # 0
                      смотри мы обновляем страницу с параметрами в адр.строке
                      http://s5339.test.modx.pro/?page2=6
                      но запрос вот какой идет
                      joxi.ru/Ci8jUxjKTJDVKaaE9Ho
                      и потом сколько не пытайся получить пагинацию 1 — он выдаст ту страницу что была при обновлении.
                      cache_key тут не поможет
                      1. Володя 14 марта 2014, 20:52 # 0
                        короче как я понял если бы pdoPage не редиректил с ?page=1 на просто страницу,
                        то все бы работало)))
                        1. Чикин Артур 14 марта 2014, 20:58 # 0
                          Писать Василию хотелку что бы добавил параметр для отключения редиректа.
                          1. Володя 14 марта 2014, 20:59 # +1
                            Да я боюсь))) я помню как я Василия подначивал что этого редиректа нет)))
                            1. Чикин Артур 14 марта 2014, 21:03 # 0
                              Ну или тогда использовать # в урл. Как на одном из проектов в SimpleDream.ru сделали. Смотреть тут: gsgarden.ru/

                              Пощелкай по ссылкам и по обновляй страницу с #/news/ к примеру.
                              1. Володя 14 марта 2014, 23:54 # 0
                                Да, как я и предполагал…
                                Сменил предел с 1 на 0 и все заработало.
                                if (isset($_REQUEST[$pageVarKey]) && (!is_numeric($_REQUEST[$pageVarKey]) || $_REQUEST[$pageVarKey] <= 0)) {
                                	return $pdoPage->redirectToFirst();
                                Возможно есть более изящное решение…
                                1. Василий Наумкин 15 марта 2014, 06:04 # 0
                                  Ха-ха!

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

                                  Смысл в том, чтобы при клике по ссылке выделить из неё номер страницы и отправить на сервер. Если номера нет — то это страница 1.
                                  1. Володя 15 марта 2014, 09:09 # 0
                                    У меня с таким же смыслом, если номера нет — страница 1.
                                    if (!parseInt(pagenum)) {
                                            pagenum=1;
                                            Hash.remove(pagination); 
                                            url = url+"?"+pagination+"="+pagenum; 
                                        } 
                                    
                                    Но пока в pdoPage не внес изменения — грузилась кешированая страница с первого запроса.
                                    1. Володя 15 марта 2014, 09:42 # 0
                                      мне так кажется что дело в этом —
                                      $key = sha1(serialize($scriptProperties));
                                      1. Володя 15 марта 2014, 09:57 # 0
                                        фигню написал
                    2. Yana V 14 марта 2014, 11:53 # 0
                      Классно =) как всегда спасибо)!
                      1. Володя 17 марта 2014, 13:47 # +1
                        книжку скачал по JavaScript. Начал читать, пока только вступление осилил и переменные))). Сильно не ругайте за код…
                        Попробовал реализовать бесконечную прокрутку аналогичным образом с помощью Ajaxsnippet.
                        код тут — github.com/vgrish/ajaxscroll
                        Работает как то так — s5354.test.modx.pro/
                        1. Чикин Артур 17 марта 2014, 15:35 # 0
                          Круто, может твои наработки включат в комплект к AjaxSnippet из коробки.
                        2. Марк Валерич 17 марта 2014, 15:48 # 0
                          а можно ли сделать то же самое, но еще докрутить автооткрытие page2, page3 при пролистывание товара вниз? что-то на подобии vk, когда листаешь страницу вниз?
                          1. Володя 17 марта 2014, 16:00 # 0
                            а щас не то? recordit.co/m2hxR0i4MB.gif
                            1. Mihail 19 марта 2014, 16:41 # 0
                              Это как раз то, что я долго искал. Но к сожалению, я не смог настроить должным образом. Все скрипты подключаю, сниппеты создаю и компоненты устанавливаю, но оно не хочет работать. Вот пример страницы mensales.ru/test/. Помогите разобраться, пожалуйста.
                          2. Марк Валерич 17 марта 2014, 16:06 # 0
                            если честно, то проверил в мозиле и ян.бр и необходимо все таки нажимать на кнопку, а я хотел узнать, можно ли без нажима…

                            Может у меня траблы, но просмотрев gif, вроде бы увидел, что там есть автооткрытие… но сам не увидел((((
                            1. Володя 17 марта 2014, 16:12 # 0
                              Ну если честно то может и у меня траблы, а может у вас экран огромный, и поэтому прокрутка не срабатывает…
                              сейчас товаров больше закину — должно тогда включится…
                            2. Марк Валерич 17 марта 2014, 16:22 # 0
                              Вот сейчас работает)))
                              Спасибо)))
                              Добавление новых комментариев отключено.