Question

I’m having a bit of trouble with Paul Irish’s infinite scroll plugin. If I only have 1 page of results, it works perfectly fine, but if I have more than one page of results it repeats the last page over and over again. Here is my infinite scroll configuration:

$('#grid').infinitescroll({
navSelector  : "#paginationControl:first",
nextSelector : "#paginationControl a#next:first",
itemSelector : "#grid .entry",
debug : true,
bufferPx : 500
},
function(newElements){
//Apply masonry
var $newElems = $( newElements );
$newElems.imagesLoaded( function(){
    $("#grid").masonry( 'appended', $newElems );
});
    //See if this is the last page
if( curPage >= pages ){
    alert("Infinite scroll is paused.");
    $('#grid').infinitescroll('pause');
}
});

And here are my pagination controls:

<?php if ($this->pageCount): ?>
<div class="paginationControl" id="paginationControl">
<!-- Previous page link -->
<?php if (isset($this->previous)): ?>
    <a href="<?php echo $this->url(array('page' => $this->previous)); ?>" id="previous">
        &lt; Previous
    </a> |
<?php else: ?>
    <span class="disabled">&lt; Previous</span> |
<?php endif; ?>

<!-- Numbered page links -->
<div id="numberedPages">
<?php foreach ($this->pagesInRange as $page): ?>
    <?php if ($page != $this->current): ?>
        <a href="<?php echo $this->url(array('page' => $page)); ?>">
        <?php echo $page; ?>
        </a> |
    <?php else: ?>
        <?php echo $page; ?> |
    <?php endif; ?>
<?php endforeach; ?>
</div>
<!-- Next page link -->
<?php if (isset($this->next)): ?>
    <a id="next" href="<?php echo $this->url(array('page' => $this->next)); ?>" >
    Next &gt;
    </a>
<?php else: ?>
    <span id="next" class="disabled">Next &gt;</span>
<?php endif; ?>
</div>
<?php endif; ?>

I figured that since the next page selector on the last page is disabled it would stop when it hit the last page. Why does it keep loading the last page over and over again and how can I stop it from happening?

EDIT:

I added an if check to the callback function to try to stop the scroll after a while, inspired by this question jQuery InfiniteScroll plugin loads the last page over and over.

//See if this is the last page
if( curPage >= pages ){
    alert("Infinite scroll is paused.");
    $('#grid').infinitescroll('pause');
}

Where pages is defined as the last page available and curPage is the current page, incremented each call. The check was working perfectly at one point, but I changed something, I’m not sure what, and now for some reason now I’m getting the error $("#grid").infinitescroll is not a function
$('#grid').infinitescroll('pause'); I have no idea how infinite scroll is not a function at that point when it clearly had to be for javascript to get to it in the first place. How can I get rid of this not a function error?

Answer 1

If you give zend’s paginator a page number that doesn’t exist, it simply retrieves the closest valid page number. If there were 20 valid pages and I tried to retrieve the 400th, it would simply return the 20th. I added code to the backend to throw 404s and it stops on time now. The infinite scroll script simply keeps loading pages until the backend throws an error so it didn’t know it was repeating itself.

if($page_num > $pager->getPages()->pageCount){
        $this->_response->clearBody();
        $this->_response->clearHeaders();
        $this->_response->setHttpResponseCode(404);
    } 

I would guess that the disabled next page selector in my pagination controls didn’t stop the infinite scroll script from selecting the next page because it only uses the controls to figure out the page url scheme and then simply increments the numbers from there.