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

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. — gyaani_guy, Sep 09 '15 at 16:51
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? — user3312792, Sep 11 '15 at 10:26

score 4 · Answer 1 · answered Sep 07 '15 at 09:36

4

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

answered Sep 07 '15 at 09:36

vijayP

11,432
5
25
40

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 – user3312792 Sep 07 '15 at 11:51
have you copied pagination script from http://www.a2zwebhelp.com/php-mysql-pagination ? – vijayP Sep 07 '15 at 12:02
mines from http://www.phpeasystep.com/phptu/29.html but it looks the same as the one in your link – user3312792 Sep 07 '15 at 12:09
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 – Nishith Kant Chaturvedi Sep 07 '15 at 14:59
can anyone recommend a pagination that works with infinite ajax scroll – user3312792 Sep 10 '15 at 12:41
how does infinite ajax scroll know when to stop? – user3312792 Sep 11 '15 at 11:39
I believe it stops when it sees `disabled` class to `next` target. Also can you please try changing your pagination script From `$pagination.= "
«
«

vijayP

Sep 11 '15 at 12:32

i think its to do with the class=\"next\" – user3312792 Sep 16 '15 at 08:16

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 – vijayP Sep 16 '15 at 08:48

art-fan-vikram · Answer 2 · 2015-09-11T19:02:54.697

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.

infinite ajax scroll pagination looping

2 Answers2

Linked