title: jQuery Infinite Page Scroll
body: <p>I am trying to accomplish a ajax content load on page scroll and getting stuck at some parts.</p>
  
  <p>Here is my PHP code:</p>
  
  <pre><code>//Fetch Total Record
  $objDB = new DB;
  $fetchCount = $objDB
     -&gt;setStoredProc( 'petContestFetchImagesCount' )
     -&gt;execStoredProc()
     -&gt;parseXML();
   $fetchCount = $fetchCount-&gt;data;
  
   //Total number of results
   $totalResults = $fetchCount-&gt;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' =&gt; array(
          'default'   =&gt; 1,
          'min_range' =&gt; 1,
      ),
  )));
  
  $offset = ($page - 1)  * $limit;
  
  // Some information to display to the user
  $start = $offset + 1;
  $end = min(($offset + $limit), $total); 
  
  $nextlink = ($page &lt; $pages) ? '&lt;nav id="page_nav"&gt;&lt;a href="?page=' . ($page + 1) . '"&gt;&lt;/a&gt;&lt;/nav&gt;' : '';
  
  //Fetch Entries
  $objDB = new DB;
  $submissions = $objDB
     -&gt;setStoredProc( 'petContestFetchImages' )
     -&gt;setParam("offset", $offset )
     -&gt;setParam("rows", $limit )
     -&gt;execStoredProc()
     -&gt;parseXML(); 
  </code></pre>
  
  <p>From this point, It knows the number of posts it needs, creates the pagination etc. </p>
  
  <p>I now use an infinateScroll plugin and set it up like so:</p>
  
  <pre><code>    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))
      })
  
  })
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Not sure what I am missing here but it shouldnt load any more records after hitting the last one.</p>
  
  <p>I used this for reference:
  <a href="http://blog.lingohub.com/developers/2013/09/endless-pages-scrolling-masonry/" rel="nofollow">http://blog.lingohub.com/developers/2013/09/endless-pages-scrolling-masonry/</a></p>
  
  <p>EDIT:</p>
  
  <p>This client side change works however it doesnt prevent the ajax call from firing, just from appending any results that it does fine. </p>
  
  <pre><code>var tmp = 1;
  var pages = '&lt;?php echo $pages; ?&gt;
  
  $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 &lt; pages){
          $container.isotope('appended', $(newElements))
      }
      tmp++;
      })
  
  })
  </code></pre>