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";        
}

Polston

I feel the error is server_side. var_dump the value of $total_pages among other variables in the php script, to check. Although a simple 'hack' client side would be to compare the var pageNum against the last digits in the var url. If they are not equal , then destroy() , show message. – Dignadignified

its not the $total_pages value I have checked this, I think its the pagination script, looping through page1 and page2, do you know of any pagination scripts that works well with infinite ajax scroll? – Polston

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++; 
    }
})

Onaonager

I tried adding the noneleft script, it did not show in console so I think your right it might be the pagination - do you know of any pagination scripts that work well with ias? I have added my pagination code to the question, maybe you can spot the error – Polston

have you copied pagination script from a2zwebhelp.com/php-mysql-pagination ? – Onaonager

mines from phpeasystep.com/phptu/29.html but it looks the same as the one in your link – Polston

I am using something similar , while making ajax call Initial I set loadingSearchResult =false; then on success of ajax call I add data.length to a variable say resultsize and make loadingSearchResult = true; On scrolling again till I get success (mean I have data in response I set this loadingSearchResult as true;) and when my ajax returns me no result I set loadingSearchResult = false; I use this scroll to pull more data till my condition loadingSearchResult is true...when no data it sets to false and no ajax request happens.. Hope it may provide u some idea – Teilo

can anyone recommend a pagination that works with infinite ajax scroll – Polston

how does infinite ajax scroll know when to stop? – Polston

I believe it stops when it sees disabled class to next target. Also can you please try changing your pagination script From $pagination.= "<li class=\"disabled\"><a href=\"#\">&laquo;</a></li>"; TO $pagination.= "<li class=\"disabled\"><a class=\"disabled\" href=\"#\">&laquo;</a></li>"; – Onaonager

i think its to do with the class=\"next\" – Polston

hello. Is that possible for you to NOT to generate "Prev" and "Next" links if the user is on 1st page and on last page . i.e. could you please try removing else part from your if ($page > 1) and if ($page < $counter - 1) code – Onaonager

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.

Dallapiccola