Ошибка динамической подгрузки контента через 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

08 декабря 2014, 04:39

2 152

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

Василий Наумкин

08 декабря 2014, 09:11

modx.pro/components/4043-pdotools-1-9-6-rc-ajax-pagination-in-pdopage/

solar-wind

08 декабря 2014, 10:28

Спасибо большое, но слишком много кода для такой простой задачи.
Я решил ее гораздо короче и оптимальнее, тоже с использованием 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

Оно и видно, прям в разы меньше кода. При этом выкинуты никому не нужные прямые ссылки на конкретную страницу — обожаю такие сайты.

Самое важное в ссылке это новость об &ajax=`1` в pdoPage. А дальше каждый крутится как хочет.

solar-wind

08 декабря 2014, 17:10

Сам скрипт очень маленький. Больше половины у меня html-код составляет. Что касается, про параметр ajax я его просто не заметил, так как переписывал его с другого сниппета. Кстати я тоже с Кемерово, как и вы Василий), так что предлагаю в жизни как-нибудь вам поделиться опытом со мной, как ни как земляки).

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

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

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

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