cycero cycero - 6 months ago 8
jQuery Question

jQuery InfiniteScroll plugin loads the last page over and over

I'm using the following jQuery InfiniteScroll plugin which actually works but keeps loading the last page over and over, it can't be stopped. Here's the code which I use:

$('#catalog').infinitescroll({

navSelector : "div.page-nav:last",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.page-nav a.navnext:last",
// selector for the NEXT link (to page 2)
itemSelector : "#catalog div.single",
// selector for all items you'll retrieve

bufferPx : 400
});


And my pagination looks like the following:

<div id="page-nav" class="page-nav">
<div class="top">
<a id="page-1" class="active">1</a>
<a id="page-2" href="?page=2">2</a>
<a id="page-3" href="?page=3">3</a>
<a id="page-4" href="?page=4">4</a>
<a id="page-5" href="?page=5">5</a>
<a id="page-6" href="?page=6">6</a>
<a id="page-7" href="?page=7">7</a>
</div>
<div class="bottom">
<span class="right">
<a class="navnext" href="?page=2" id="next-2">Next</a>
<span class="next">Ctrl</span>
</span>
</div>
</div>


Could anybody help me with this, please?

Thank you.

Answer

OK. That was not actually a bug in the Infinite Scroll plugin. The case is that my script did not return a 404 error if there was not such a page available. It simply returned the last page which was being appended to the content over and over. To solve this issue I've stored the number of all pages I had and wanted to show, incremented a variable after each content load and unbinded the scrolling once all the pages were loaded successfully. The code is below:

var curPage = 1;
var pagesNum = $("div.page-nav").find("a.pag:last").text();   // Number of pages

$('#catalog').infinitescroll({

        navSelector  : "div.page-nav:last",            
                       // selector for the paged navigation (it will be hidden)
        nextSelector : "div.page-nav a.navnext:last",    
                       // selector for the NEXT link (to page 2)
        itemSelector : "#catalog div.line",          
                       // selector for all items you'll retrieve

        bufferPx     : 800

        }, function() {  // Optional callback when new content is successfully loaded

            curPage++;

            if(curPage == pagesNum) {

                $(window).unbind('.infscr');

            } else {}

});

I hope this will help somebody else.