jQuery Infinite Page Scroll

Question

I am trying to accomplish a ajax content load on page scroll and getting stuck at some parts.

Here is my PHP code:

//Fetch Total Record
$objDB = new DB;
$fetchCount = $objDB
   ->setStoredProc( 'petContestFetchImagesCount' )
   ->execStoredProc()
   ->parseXML();
 $fetchCount = $fetchCount->data;

 //Total number of results
 $totalResults = $fetchCount->totalRecords; 

 //Records per page
 $limit = 5; 

 //Total number of pages / calls we will make based on the results
 $pages = ceil($totalResults/$limit);

//What page are we currently on?
$page = min($pages, filter_input(INPUT_GET, 'page', FILTER_VALIDATE_INT, array(
    'options' => array(
        'default'   => 1,
        'min_range' => 1,
    ),
)));

$offset = ($page - 1)  * $limit;

// Some information to display to the user
$start = $offset + 1;
$end = min(($offset + $limit), $total); 

$nextlink = ($page < $pages) ? '<nav id="page_nav"><a href="?page=' . ($page + 1) . '"></a></nav>' : '';

//Fetch Entries
$objDB = new DB;
$submissions = $objDB
   ->setStoredProc( 'petContestFetchImages' )
   ->setParam("offset", $offset )
   ->setParam("rows", $limit )
   ->execStoredProc()
   ->parseXML(); 

From this point, It knows the number of posts it needs, creates the pagination etc.

I now use an infinateScroll plugin and set it up like so:

    var $container = $('[name=posts]')

    $($container).isotope({
    itemSelector: '.item',
    layoutMode: 'masonry',
    masonry: {
        columnWidth: 10

    }
})

    $container.infinitescroll({
    navSelector: '#page_nav',
    nextSelector: '#page_nav a',
    itemSelector: '.item',
    pixelsFromNavToBottom: -Math.round($(window).height() * 0.9),
    bufferPx: Math.round($(window).height() * 0.9),
    loading: {
        msgText: $container.attr("data-loading-message"),
        finishedMsg: $container.attr("data-no-more-translators")
        }
}, function(newElements) {
    $container.isotope('appended', $(newElements))
    })

})

As I scroll down the page, it is loading the content fine. However, it gets to the last record and keeps loading only the last record every time. If I scroll up and then down again, it loads just the last record.

I tested my stored procedure and its not even outputting results when I say start at record 11 (the last result) and give me 5 more, it returns no data.

Not sure what I am missing here but it shouldnt load any more records after hitting the last one.

I used this for reference: http://blog.lingohub.com/developers/2013/09/endless-pages-scrolling-masonry/

EDIT:

This client side change works however it doesnt prevent the ajax call from firing, just from appending any results that it does fine.

var tmp = 1;
var pages = '<?php echo $pages; ?>

$container.infinitescroll({
    navSelector: '#page_nav',
    nextSelector: '#page_nav a',
    itemSelector: '.item',
    pixelsFromNavToBottom: -Math.round($(window).height() * 0.9),
    bufferPx: Math.round($(window).height() * 0.9),
    loading: {
        msgText: $container.attr("data-loading-message"),
        finishedMsg: $container.attr("data-no-more-translators")
        }
}, function(newElements) {
    if(tmp < pages){
        $container.isotope('appended', $(newElements))
    }
    tmp++;
    })

})

Answer 1

I would think you would just do a check to see if you've reached the max page count?

  if($page<$pages){
       //Fetch Entries
       $objDB = new DB;
       $submissions = $objDB
        ->setStoredProc( 'petContestFetchImages' )
        ->setParam("offset", $offset )
        ->setParam("rows", $limit )
        ->execStoredProc()
        ->parseXML(); 
    }

Then change the nextlink to echo one extra link higher than $pages variable. Like so...

    $nextlink = ($page <= $pages) ? '<nav id="page_nav"><a href="?page=' . ($page + 1) . '"></a></nav>' : '';