1

Добрый день. Опять возвращаюсь к теме динамической загрузки, но уже с конкретной ошибкой. Небольшая проблема заключается в том, что подсмотрел на сайте одного из ведущих разработчиков на modx код, сделал по исходным примерам, переправил его под себя. В итоге получилось следующее:

<div id="results">
   [[!pdoPage?
      &element=`msProducts`
      &parents=`17`
      &includeThumbs=`200x230`
      &limit=`16`
      &includeTVs=`count_flow,heightTV,persent_discount,lenghtTV`
      &tvPrefix=`tv.`
      &showHidden=`1`        
    ]]  
</div>

<div class="clear"></div>
[[!+page.nav]]
<center>
   <button class="load_more btn-more" data-page="1" style="margin-top: 50px;">Показать ещё
   </button>
</center>

В скриптах пишу следующее:

<script type="text/javascript">
$(document).ready(function() {  
    $('.load_more').click(function(){
        var data = $(this).data();
        var pages_count = $('.paginator li').length;
        console.log(pages_count); 
        if(pages_count == data.page){
            $('.load_more').hide()
        }
        data.page+=1;
        console.log(data);  
        // dont touch
        $('#results').append('<div class=loaded'+data.page+'></div>');
        $('.loaded'+data.page).load('тестовая-страница-ajax-подгрузки/?page='+data.page+' #results');
    });
});
</script>

Ситуация получается следующая: изначально выводится 16 товаров, затем, когда нажимаем на кнопку подгрузки, загружаются еще те же самые шестнадцать товаров, и, соответственно, это может продолжаться сколь угодно долго. Еще один нюанс, что паггинация вроде подключена конструкцией [[!+page.nav]], но она не выводится. Что я делаю не так?

1 ответ 1

1

Решение ситуации было такое, немного поправив код, получил следующее:

<script type="text/javascript">
$(document).ready(function() {  
    $('.load_more').click(function(){
        var data = $(this).data();
        var pages_count = $('.paginator li').length;
        console.log(pages_count); 
        if(pages_count == data.page){
            $('.load_more').hide()
        }
        data.page+=1;

        // dont touch
        $('#results').append('<div class=loaded'+data.page+'></div>');
        $('.loaded'+data.page).load('тестовая-страница-ajax-подгрузки/?page='+data.page+' #results');
    });
});
</script>

<div class="content">
<h1>[[*pagetitle]]</h1>
        <p>[[*longtitle]]</p>
        <div class="product-box">          
         <div id="results">
          [[!pdoPage?
              &element=`msProducts`
              &parents=`17`
              &includeThumbs=`200x230`
              &limit=`4`
              &includeTVs=`count_flow,heightTV,persent_discount,lenghtTV`
              &tvPrefix=`tv.`
              &showHidden=`1`                         
             ]]
        </div>
       </div>
       <div class="clear"></div>
       <div style="display:none">[[!+page.nav]]</div>
       <center>
         <button class="load_more btn-more" data-page="1" style="margin-top: 50px;">Показать ещё</button>
       </center>
</div>  
<div class="clear"></div>

Немного поясню, что тут происходит в коде. По клику на кнопку класса .load_more получаем текущую страницу, если число страниц равно общему количеству, то кнопку скрываем. Далее идет приращение значения страницы текущей.

В блок results подгружаем данные.

В hmtl коде выводим pdoPage, где limit - это число записей выводимых за раз. Стандартную паггинацию [[!+page.nav]] оборачиваем в невидимый блок. После чего все это дело работает. Вполне компактный и быстрый код.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.