Не работают два вызова pdoPage на одной странице.

Здравствуйте.

Кто сталкивался с такой проблемой, отзовитесь )
На сайте MODX Revo. 2.5.7 необходимо вывести getImageList два раза через ajax, при помощи прокрутки на соответствующем блоке.

Первый вывод:

<div id="pdopageLam" class="materialsContainer">

        <div class="materials materials-first clearfix">
           
            [[!pdoPage?
                &element=`getImageList`
                
                &tvname=`jalousie-material-verticalTV` 
                &docid=`73` 
                &tpl=`jalousie-box-materialTpl`
                &sort=`[{"sortby":"price","sortdir":"ASC"}]`
                &where=`{"published":"1"}`
                &limit=`10`
                &maxLimit=`1000000`
                
                &cache=`1`
                &cacheTime=`86400`
                
                &pageVarKey=`pdopageLam`
                &pageNavVar=`lam.navLam`
                &totalVar=`ImagesTotal_Lam`
                &toPlaceholder=`ImagesResult_Lam`
                
                &ajaxElemWrapper=`#pdopageLam`
                &ajaxElemRows=`#pdopageLam .materials`
                &ajaxElemPagination=`#pdopageLam .pagination`
                &ajaxElemLink=`#pdopageLam .pagination a`
              
                &ajaxMode=`scroll`
            ]]

            [[!+ImagesTotal_Lam:ne=`0`:then=`[[+ImagesResult_Lam]]`:else=`<p>Материалы отсутствуют</p>`]]

        </div>
        
        [[!+lam.navLam]]
    
</div>

Второй вывод:

<div id="pdopageBasis" class="materialsContainer">

        <div class="materials materials-second clearfix">
            
            [[!pdoPage?
                &element=`getImageList`
                
                &tvname=`jalousie-material-verticalTV` 
                &docid=`73` 
                &tpl=`jalousie-box-materialTpl`
                &sort=`[{"sortby":"price","sortdir":"ASC"}]`
                &where=`{"published":"1"}`
                &limit=`10` 
                &maxLimit=`1000000`
                
                &cache=`1`
                &cacheTime=`86400`
                
                &pageVarKey=`pdopageBasis`
                &pageNavVar=`basis.navBasis`
                &totalVar=`ImagesTotal_Basis`
                &toPlaceholder=`ImagesResult_Basis`
                
                &ajaxElemWrapper=`#pdopageBasis`
                &ajaxElemRows=`#pdopageBasis .materials`
                &ajaxElemPagination=`#pdopageBasis .pagination`
                &ajaxElemLink=`#pdopageBasis .pagination a`
                
                &ajaxMode=`scroll`
            ]]

            [[!+ImagesTotal_Basis:ne=`0`:then=`[[+ImagesResult_Basis]]`:else=`<p>Материалы отсутствуют</p>`]]

        </div>
        
        [[!+basis.navBasis]]
    
</div>

И тут проблема. Работает только верхний вывод, при попытке скролла нижнего, подгрузка идёт в верхний блок. По одиночке они работают правильно, в паре нет.

До этого был вывод при помощи: &ajaxMode=`button` подгрузка была правильной, и в паре и по одиночке.

В чём может быть проблема?

Максим

26 декабря 2017, 20:41

1 851

Комментарии: 5

Дмитрий

27 декабря 2017, 20:14

Копать надо в сторону js

Володя

27 декабря 2017, 20:46

попробуйте обновить pdoTools до последней версии. Теоретически не должно быть проблем. Не так давно где то делал подобное только на феном.

Максим

08 января 2018, 15:58

Нет, обновление до последней версии не решило проблему.

Максим

08 января 2018, 16:57

Изначально не предусмотрено два и более scroll — подгрузки на странице. Проблему решил с помощью «JS — костыля».
Немного видоизменил файл: assets/components/pdotools/js/pdopage.js

Сначала, к родительским блокам:

<div id="pdopageLam" class="materialsContainer"> и 
<div id="pdopageBasis" class="materialsContainer">

добавляем атрибуты: reached=«1» и reached=«2»

В pdoPage добавляем параметр &frontend_js=`[[+assetsUrl]]js/pdopage.js` так как по умолчанию ссылается на pdopage.min.js и вот pdopage.js нужно немного отредактировать.

Мне нужно было сделать максимум до трёх выводов с ajax загрузкой при скролле на блоке, поэтому скрипт корректно работает только до трёх выводов на одной странице.

В самом файле: pdopage.js объявляем три глобальные переменные (после pdoPage.Reached = false):

pdoPage.Reached_1 = false;
pdoPage.Reached_2 = false;
pdoPage.Reached_3 = false;

Меняем событие скролла:

$window.on('scroll', function () {

     if (!pdoPage.Reached && $window.scrollTop() > wrapper.height() - $window.height()) {
          pdoPage.Reached = true;
          pdoPage.addPage(config);
     }
});

на:

var idCont = wrapper.selector;
$(idCont).on('scroll', function(){

     if($(this).attr('reached') == 1) {

          if(!pdoPage.Reached_1) {
               pdoPage.Reached_1 = true;
               pdoPage.addPage(config);
          }
     }
     if($(this).attr('reached') == 2) {

          if(!pdoPage.Reached_2) {
               pdoPage.Reached_2 = true;
               pdoPage.addPage(config);
          }
     }
     if($(this).attr('reached') == 3) {

          if(!pdoPage.Reached_3) {
               pdoPage.Reached_3 = true;
               pdoPage.addPage(config);
          }
     }
});

В запросе $.post(...) добавляем (после pdoPage.Reached = false):

pdoPage.Reached_1 = false;
pdoPage.Reached_2 = false;
pdoPage.Reached_3 = false;

Вот так оно работает. Загрузка происходит при скролле конкретного блока, а не всей страницы как было ранее.
Сделано грубо, зато быстро )

Максим

08 января 2018, 17:10

Переменные pdoPage.Reached_1, 2, 3 нужны что бы загрузка происходила при достижении определённой позиции ползунка. Без них, запросы на сервер льются рекой и некоторые данные могут не подгружаться. Особенно если прокрутили резко.

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Не работают два вызова pdoPage на одной странице.

Комментарии: 5

Здесь упомянуты