अनंत AJAX स्क्रॉल पेजिनेशन looping

Question

मैं अनंत AJAX स्क्रॉल का उपयोग कर रहा हूँ। यह काम कर रहा है क्योंकि मैं अधिक आइटम लोड कर सकता हूं और यह सामग्री लोड करता है। हालांकि आईएएस अंतिम पृष्ठ पर रोकने के लिए और दिखाने के 'कोई और अधिक पोस्ट नहीं हैं' चाहिए, बजाय यह अभी भी 'लोड अधिक आइटम' क्लिक जो जब क्लिक पेज 2.

कंसोल से पुन: पृष्ठांकन शुरू होता है पता चलता है:

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 

आईएएस प्रदर्शित करना चाहिए 'कोई और अधिक पोस्ट नहीं है' - बजाय इसे नीचे के रूप में जारी है:

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 

आईएएस:

<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> 

मैं नीचे लागू करने के लिए कोशिश की है, यह काम नहीं करता है:

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

मैं पृष्ठांकन उपयोग कर रहा हूँ से http://www.phpeasystep.com/phptu/29.html

पृष्ठांकन:

$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

अनंत के लिए एक और ईवेंट हैंडलर जोड़ने का प्रयास करें AJAX स्क्रॉल निम्नानुसार है:

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

और देखें कि यह ब्राउज़र कंसोल में मुद्रित हो रहा है या नहीं। यदि यह मुद्रित नहीं हो रहा है तो आपको अपने पेजिनेशन लिंक में कोई समस्या है। क्रॉस सत्यापित करें कि। फ़ायरबग के साथ अपने एचटीएमएल का निरीक्षण करें और जांचें कि वैध लिंक जेनरेट हो रहे हैं या नहीं।

यदि आपका पृष्ठांकन सही है और अगर आप noneLeft घटना ऊपर देख रहे हैं तो स्क्रॉल को रोकने के लिए निम्नलिखित कोड का उपयोग कर प्रयास करें:, इसे यहाँ कैसे काम करता है,

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

Answer 2

मैं शुद्ध jQuery के साथ एक कस्टम समाधान है

/** 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(); 
     } 
    }); 
    } 

मुझे आशा है कि आपको कोड तर्क मिलेगा, इसकी आवश्यकता के अनुसार इसे और कोड अपडेट की आवश्यकता है, अगर मुझे इसमें कठिनाई हो रही है तो मुझे बताएं।