infinite ajax scroll pagination looping

Question

I am using infinite ajax scroll. It is working as in I can click load more items and this loads the content. However ias should stop at the last page and show 'There are no more posts', instead it still shows the 'load more items' link which when clicked starts the pagination again from page 2.

console:

Welcome at page 2, the original url of this page would be: /website/home/2
Welcome at page 3, the original url of this page would be: /website/home/3

ias should display 'There are no more posts' - instead it continues as below:

Welcome at page 4, the original url of this page would be: /website/home/2
Welcome at page 5, the original url of this page would be: /website/home/3

ias:

<script type="text/javascript">
var ias = $.ias({
  container: "#posts",
  item: ".post",
  pagination: "#pagination",
  next: ".next a"
});

ias.extension(new IASSpinnerExtension());
ias.extension(new IASTriggerExtension({offset: 1}));
ias.extension(new IASNoneLeftExtension({text: 'There are no more posts.'}));
jQuery.ias().extension(new IASPagingExtension());
jQuery.ias().on('pageChange', function(pageNum, scrollOffset, url) {

console.log(
    "Welcome at page " + pageNum + ", " +
    "the original url of this page would be: " + url    
);

});     
</script>

I have tried to implement the below, it does not work:

if(url == '/website/home/2' && pageNum > 2) {
jQuery.ias().destroy();
}

I am using pagination from http://www.phpeasystep.com/phptu/29.html

pagination:

$targetpage = "home.php";   
$limit = 10;                            
$page = $_GET['page'];
if($page) 
    $start = ($page - 1) * $limit;      
else
    $start = 0; 



$query2 = $pdo->prepare("select count(*) from table where...");
$query2->execute(array(':id' => $id));
$total_pages = $query2->fetchColumn();  



if ($page == 0) $page = 1;                  
$prev = $page - 1;                          
$next = $page + 1;                          
$lastpage = ceil($total_pages/$limit);      
$lpm1 = $lastpage - 1;                      


$pagination = "";
if($lastpage > 1)
{   
    $pagination .= "<ul class=\"pagination\">";

    if ($page > 1) 
        $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$prev\">&laquo;</a></li>";
    else
        $pagination.= "<li class=\"disabled\"><a href=\"#\">&laquo;</a></li>";  


    if ($lastpage < 7 + ($adjacents * 2))   
    {   
        for ($counter = 1; $counter <= $lastpage; $counter++)
        {
            if ($counter == $page)
                $pagination.= "<li class=\"active\"><a href=\"#\">$counter<span class=\"sr-only\">(current)</span></a></li>";
            else
                $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$counter\">$counter</a></li>";                    
        }
    }
    elseif($lastpage > 5 + ($adjacents * 2))    
    {

        if($page < 1 + ($adjacents * 2))        
        {
            for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
            {
                if ($counter == $page)
                    $pagination.= "<li class=\"active\"><a href=\"#\">$counter<span class=\"sr-only\">(current)</span></a></li>";
                else
                    $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$counter\">$counter</a></li>";                    
            }
            $pagination.= "";
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$lpm1\">$lpm1</a></li>";
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$lastpage\">$lastpage</a></li>";      
        }

        elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
        {
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=1\">1</a></li>";
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=2\">2</a></li>";
            $pagination.= "";
            for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
            {
                if ($counter == $page)
                    $pagination.= "<li class=\"active\"><a href=\"#\">$counter<span class=\"sr-only\">(current)</span></a></li>";
                else
                    $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$counter\">$counter</a></li>";                    
            }
            $pagination.= "";
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$lpm1\">$lpm1</a></li>";
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$lastpage\">$lastpage</a></li>";      
        }

        else
        {
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=1\">1</a></li>";
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=2\">2</a></li>";
            $pagination.= "";
            for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)
            {
                if ($counter == $page)
                    $pagination.= "<li class=\"active\"><a href=\"#\">$counter<span class=\"sr-only\">(current)</span></a></li>";
                else
                    $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$counter\">$counter</a></li>";                    
            }
        }
    }


    if ($page < $counter - 1) 
        $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$next\">&raquo;</a></li>";
    else
        $pagination.= "<li class=\"disabled\"><a href=\"#\">&raquo;</a></li>";
    $pagination.= "</ul>\n";        
}

Answer 1

Please try adding one more event handler for infinite ajax scroll as follows:

jQuery.ias.on('noneLeft', function() {
    console.log('We hit the bottom!');
});

And see if this is getting printed or not in browser console. If this is not getting printed then you have a problem with your pagination links. Cross verify that. Inspect your HTML with firebug and check whether valid links are getting generated or not.

If your pagination is correct and if you are seeing above noneLeft event then try using following code to stop scrolling:

pageNum = 0;
jQuery.ias.on('next', function(url) {
    if (url.indexOf("/website/home/2") > -1 && pageNum > 2) {
        return false;
    }
    else{
        pageNum++; 
    }
})

Answer 2

I have a custom solution with pure jquery, here how it works,

/** Javascript Block **/
//make a request(load_next_set_records) to records that go for content loading by scroll or click of button
$(".load_more_button").on('click',load_next_set_records);
function scrollDetectLimit(){//trigger load_next_set_records(); when scroll reaches a target}

load_next_set_records = function(){
   $.ajax({
      url : '/url_that_returns_json_records',
      data:{
           //required to return next paginated records assumed that records are wrapped within div.record_block that resembles loaded records
           next_records_load_pointer:$(".record_block").length
      },
      dataType : 'json',
      beforeSend:function(){},
      success:function(response){
        if(//response has many records)
          //actions when records exists, append new set of records wrapped with div.record_block
        else
         //simply disable loadmore button see below in error call back

      },
      error:function(xhr){
       //simply disable loadmore button
       $(".load_more_button").before('No more to load');
        $(".load_more_button").fadeOut();
      }
   });
  }

I hope you get the code logic, this need further code update as per your requirement, let me know if there is difficulty getting into it.