Hi - I am using getPage to pagination a getResources call, and then using an infinite scroll to mean the pagination is on the same page rather than a bunch of pages as per code below… This works nicely… but… I am noticing that the results it outputs are often duplicates of the results already fetched on the first return of results… Any ideas why this is happening and how I can resolve it?
[[!getPage@custom? &pageNavOuterTpl=`[[+next]]` &pageNextTpl=`[[$ELEMENT_InfiniteScroll_customNextTpl]]` &element=`getResources` &limit=`16` &parents=`2` &resources=`-[[!GetRestOfWorkIndexProjects-ALL-NEWPAGE]]` &tvFilters=`ELEMENT-2019Project-WorkIndexSelections==%779%` &tpl=`ELEMENT-2019Work-Grid-ProjecTpl` &showHidden=`1` &pageNavVar=`pagination` &includeContent=`1` &includeTVs=`1` &processTVs=`1` &tvPrefix=`` &sortby=`RAND()` &includeTVList=`ELEMENT-2019Project-WorkIndexProjectBlurb,ELEMENT-2019Project-WorkIndexSelections,ELE-2019Project-WorkIndexCoverIMG-ALL,ELE-2019Project-WorkIndexCoverIMG-EXPERTISE,ELE-2019Project-WorkIndexCoverIMG-EXPERTISE-CAT1,ELE-2019Project-WorkIndexCoverIMG-EXPERTISE-CAT2,ELE-2019Project-WorkIndexCoverIMG-EXPERTISE-CAT3,ELE-2019Project-WorkIndexCoverIMG-EXPERTISE-CAT4,ELE-2019Project-WorkIndexCoverIMG-EXPERTISE-CAT5,ELE-2019Project-WorkIndexCoverIMG-INDUSTRY,ELE-2019Project-WorkIndexCoverIMG-INDUSTRY-CAT1,ELE-2019Project-WorkIndexCoverIMG-INDUSTRY-CAT2,ELE-2019Project-WorkIndexCoverIMG-INDUSTRY-CAT3,ELE-2019Project-WorkIndexCoverIMG-INDUSTRY-CAT4,ELE-2019Project-WorkIndexCoverIMG-INDUSTRY-CAT5`]]
[[!+pagination]]
pageNextTpl is as below:
<div class="InfiniteLoaderLoadingMessage">
<img src="/assets2019/images/core/ajax-loader.gif" width="16" height="11" />
<p>Loading...</p>
</div>
<span class="InfiniteLoaderNextContainer">
<a class="loadMore" id="loadMore" href="[[+href]]">See More</a>
<script>
// $('#loadMore').click(function(){
$('#loadMore').on('click',function(){
$('.InfiniteLoaderLoadingMessage').addClass('showME');
// gets url from clicked button
var moreURL = $(this).attr('href');
// calls url to get new data
$.get( moreURL, function( data ) {
// inspects data for desired elements, so that whole page doesn't render
var newData = $(data).find('.page-content').children();
// inserts desired data after existing content
$(".page-content").append(newData);
$('.InfiniteLoaderLoadingMessage').removeClass('showME');
});
// removes button and script so that there are not duplicates, as ajax call brought in a new button and script after loaded elements
$(this).parent().remove();
return false;
// call hover jquery in 2019/custom.js
workIndexRollOvers();
event.preventDefault();
});
</script>
</span>
The snippet GetRestOfWorkIndexProjects-ALL-NEWPAGE is a list of values which this getPage/getResources call should not display.
Any ideas?