Ошибка динамической подгрузки контента через ajax


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

<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]], он она не выводится. Что я делаю не так?
solar-wind
solar-wind
08 декабря 2014, 04:39
modx.pro
1 796
0

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

    solar-wind
    solar-wind
    08 декабря 2014, 10:28
    0
    Спасибо большое, но слишком много кода для такой простой задачи.
    Я решил ее гораздо короче и оптимальнее, тоже с использованием pdoPage.
    Решение ситуации было такое, немного поправив код получил следующее:

    <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`       
              &ajax=`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]] оборачиваем в невидимый блок. После чего все это дело работает. Компактный и быстрый код.
      Василий Наумкин
      Василий Наумкин
      08 декабря 2014, 10:45
      0
      Оно и видно, прям в разы меньше кода. При этом выкинуты никому не нужные прямые ссылки на конкретную страницу — обожаю такие сайты.

      Самое важное в ссылке это новость об &ajax=`1` в pdoPage. А дальше каждый крутится как хочет.
        solar-wind
        solar-wind
        08 декабря 2014, 17:10
        0
        Сам скрипт очень маленький. Больше половины у меня html-код составляет. Что касается, про параметр ajax я его просто не заметил, так как переписывал его с другого сниппета. Кстати я тоже с Кемерово, как и вы Василий), так что предлагаю в жизни как-нибудь вам поделиться опытом со мной, как ни как земляки).
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    4