jQuery InfiniteScroll plugin loads the last page over and over

Question

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 1

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.

Answer 2

Just a handy hint but if you are doing this on a Magento category product listing page, you can add the following to limit the pages loaded to the correct maximum

maxPage: "<?php echo $_productCollection->getLastPageNumber(); ?>",