Hi.
(Revolution Version 2.2.4-pl and getPage 1.2.3-pl)
I have this trendy thing on my site, called Infinite Scroll, I'm sure everyone knows what it is. It loads only part of the content at the time while scrolling down.
Everything worked fine in my HTML tests before getPage, but now I hit the wall. I'm trying to call resources with getPage and it's working almost right, but there's still something awfully wrong.
I have my header and nav in the first section aside (class name .box) and after that I have a getPage call.
It calls the resources correctly with tags and template (sections with the class .box). Infinite scroll works almost fine with pagination, but when it loads new content it repeats the first box with it. So if the limit is set to 2, every third box is the header box from the top. I know it has the same class name that infinite scroll is calling, but it worked fine before...
I'm not sure what is the problem, it seems to take the first box with it on every load, is it a cache problem? Or maybe there is a property set on getPage I could change?
Some of my code:
<script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/assets/domain/js/scripts.js"></script>
<script>
jQuery(function($) {
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
columnWidth: 240
});
});
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#next a', // selector for the NEXT link (to page 2)
itemSelector : '.box', // selector for all items you'll retrieve
bufferPx : 80,
loading: {
finishedMsg: 'No more posts to load.',
img: 'assets/domain/images/ajax-loader.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
BODY (some of it)
<div id="container">
<aside class="box">
<nav id="nav_main">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
</aside>
<div id="web">
[[!getPage@infinite_scroll?
&elementClass=`modSnippet`
&element=`getResources`
&showHidden=`0`
&tpl=`post`
&sortby=`publishedon`
&limit=`2`
&tvFilters=`web`
&includeContent=`1`
&includeTVs=`1`
&processTVs=`1`
&tvPrefix=``
&parents=`2`
&hideContainers=`1`
&pageLimit=`0`
&pageNavVar=`page.nav`
]]
</div>
</div> <!-- end container -->
<div id="page-nav">[[!+page.nav]]</div>
TPL "post"
<section class="box">
....
</section>
(I added a new infinite_scroll property set and gave #next for the "next page" link.)
What could be the problem?
Thanks!
