मैं इस बटन को अनंत स्क्रॉल के लिए स्क्रॉल डाउन पर क्लिक कैसे कर सकता हूं?

Question

यहां बटन डेटाबेस से डेटा लोड करता है। ठीक काम करता है।

<li class="getmore" id="'.$post_id.'"><a>Load More Posts</a></li> 

मैं इस बटन को पृष्ठ के नीचे स्क्रॉल पर स्वचालित रूप से क्लिक करने के लिए कैसे बना सकता हूं। बस अनंत स्क्रॉल।

क्या मुझे विंडो स्क्रॉल फ़ंक्शन का उपयोग करना चाहिए। यदि हां, तो इस कोड में इसे कैसे किया जा सकता है।

मैंने इस फ़ंक्शन के अंदर AJAX कोड चिपकाकर कोशिश की है लेकिन काम नहीं कर रहा है।

संपादित करें: 1. जब मैं पुस्तक समारोह के अंदर अजाक्स शब्दों में कहें, यह getmore.php में mysql त्रुटि दिखाता है। 2. यदि मैं स्क्रॉलिंग फ़ंक्शन के अंदर क्लिक फ़ंक्शन के साथ बटन क्लास डालता हूं तो यह बहुत तेज़ हो जाता है जो एक ही पोस्ट को कई बार लोड करता है।

$(document).scroll(function(){ 
 
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) { 
 

 
    } 
 
}); 
 

 

 
$('body').on('click','.getmore',function(){ 
 

 
    var lastelement = $(this).attr('id'); 
 
    \t \t \t 
 
    $.ajax({ 
 
    type  : 'GET', 
 
    url  : 'getmore.php', 
 
    data  : 'lastelement='+lastelement, 
 
    beforesend : function(){ 
 

 
     $('.getmore').html('loading....'); 
 

 
    }, 
 
    success: function(data){ 
 
     $('.getmore').remove(); 
 
     $('#recs') .append(data) ; 
 
    } 
 
    }); 
 

 
});

<?php 
 

 
     $lastelement = $_REQUEST['lastelement' ]; 
 
     include("connect2.php"); 
 

 
     if ($lastelement!=''){ 
 

 
     $query = "SELECT * FROM `posts` " 
 

 
       . "WHERE (id < " . $lastelement . " AND " 
 
       .   "post_keywords like '%home%') " 
 

 
       . "ORDER BY `posts`.`id` DESC " 
 
       . "LIMIT 10"; 
 

 
     $records = mysql_query($query); 
 

 

 
     if (mysql_num_rows($records)) { 
 
     
 
      while($record = mysql_fetch_array($records)){ 
 

 
      $cookie_name = 'tcVotingSystem'.$record['id']; 
 
    \t \t $post_title = $record['post_title']; 
 
      $post_id = $record['id']; 
 
      $post_date = $record['post_date']; 
 
      $post_author = $record['post_author']; 
 
      $post_image = $record['post_image']; 
 

 
      $post_image2 = $record['post_image2']; 
 
      $post_keywords = $record['post_keywords']; 
 
      $post_content = substr($record['post_content'],0,100); 
 
?> 
 

 
<div> 
 
    //posts goes here 
 
</div>

Answer 1

क्या आप क्या करना चाहते एक ही अजाक्स बंद आग नीचे अपने बटन का अनुरोध एक बार पुस्तक एक निश्चित बिंदु तक पहुँच जाता है। तो बजाय स्क्रॉल पर क्लिक करें घटना समारोह डालने की, बल्कि अपने अजाक्स घटना बंद आग

उदाहरण:

$(document).scroll(function(){ 
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) { 

    $.ajax({ 
     type: 'GET', 
     url: 'getmore.php', 
     data:'lastelement='+lastelement, 
      beforesend: function(){ 
       $('.getmore').html('loading....'); 
      },  
      success: function(data){ 
       $('.getmore').remove(); 
       $('#recs') .append(data) ; 
      } 
    }); 
    } 
}); 

ऊपर सिर्फ एक उदाहरण है। एक तरफ, मैं अनुशंसा करता हूं कि आप अपने आलसी लोडिंग AJAX कॉल के लिए एक फ़ंक्शन बनाएं क्योंकि आपको इसे एक से अधिक बार उपयोग करने की आवश्यकता हो सकती है iee क्लिक करें और स्क्रॉल करें।

आशा इस

Answer 2

में मदद करता है एकाधिक भार से बचने के लिए के दौरान तेजी से स्क्रॉल आप इस सरल दृष्टिकोण के लिए जा सकते हैं:

var isLoadingNewPage = false; //initializing the flag 

$(document).scroll(function(){ 
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) 
    { 
     if(!isLoadingNewPage) 
     { 
      $('.getmore').click(); //go for next page load 
     } 
    } 


    $('body').on('click','.getmore',function(){ 
    //if the ajax request is going on then don't make another request; simply return back 
    if(isLoadingNewPage) 
     return; 

    var lastelement = $(this).attr('id'); 

    $.ajax({ 
      type: 'GET', 
      url: 'getmore.php', 
      data:'lastelement='+lastelement, 
      beforesend: function(){ 
       $('.getmore').html('loading....'); 
       isLoadingNewPage = true; //setting the flag so that no more call needed till the time response comes back 
      },  
      success: function(data){ 
       $('.getmore').remove(); 
       $('#recs') .append(data) ; 

       isLoadingNewPage = false; //resetting the flag so that ajax can happen again if user scroll again 
      } 
     }); 
    }); 
});