在一个页面上的两个不同的onscroll页面请求

Question

我有两个div当我滚动一个div它的工作正常，但滚动其他div只显示加载。我在这些方法

$.post('ListOfChatters.php', {'page': track_page}, function(data){ }//this method fetch data from Database and update content of div on scroll

$.post('fetch_Messages.php', {'page': trackChatBoxpage}, function(data){ }//but this is not working fine : not update content of div on scroll

下面是使用此语句两种方法load_contents（这是工作的罚款）和信息（这是不是滚动工作） 代码

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> 
<script type="text/javascript"> 
var track_page = 1; //track user scroll as page number, right now page number is 1 
var loading = false; //prevents multiple loads 

load_contents(track_page); //initial content load 




var trackChatBoxpage = 1; //track user scroll as page number, right now page number is 1 
var loadingChatBox = false; //prevents multiple loads 
message(trackChatBoxpage); //initial content load 





$("#chatListDiv").scroll(function() { //detect page scroll 
    if($("#chatListDiv").scrollTop() + $("#chatListDiv").height() >= 150) { //if user scrolled to bottom of the page 

     track_page++; //page number increment 
     load_contents(track_page); //load content 
    } 
});  




$("#chatBoxDiv").scroll(function() { //detect page scroll chatBoxDiv 
    if($("#chatBoxDiv").scrollTop() + $("#chatBoxDiv").height() >= 150) { //if user scrolled to bottom of the page 

     trackChatBoxpage++; //page number increment 
     message(trackChatBoxpage); //load content 
    } 
}); 

//Ajax load function 
function load_contents(track_page){ 
    if(loading == false){ 
     loading = true; //set loading flag on 
     $('#loadingchatList').show(); //show loading animation 
     $.post('ListOfChatters.php', {'page': track_page}, function(data){ 
      loading = false; //set loading flag off once the content is loaded 
      if(data.trim().length == 0){ 
       //notify user if nothing to load 
       $('#loadingchatList').html("No more records!"); 
       return; 
      } 
      $('#loadingchatList').hide(); //hide loading animation once data is received 
      $("#results").append(data); //append data into #results element 

     }).fail(function(xhr, ajaxOptions, thrownError) { //any errors? 
      alert(thrownError); //alert with HTTP error 
     }) 
    } 
} 

function message(trackChatBoxpage){ 

    if(loadingChatBox == false){ 
     loadingChatBox = true; //set loading flag on 
     $('#loadingMessage').show(); //show loading animation 
     $.post('fetch_Messages.php', {'page': trackChatBoxpage}, function(data){ 
      loading = false; //set loading flag off once the content is loaded 

      if(data.trim().length == 0){ 
       //notify user if nothing to load 
       $('#loadingMessage').html("No more records!"); 
       return; 
      } 
      alert(data); 
      $('loadingMessage').hide(); //hide loading animation once data is received 
      $("#resultMessage").append(data); //append data into #resultsMessage element 

     }).fail(function(xhr, ajaxOptions, thrownError) { //any errors? 
      alert(thrownError); //alert with HTTP error 
     }) 
    } 

} 


</script> 

谢谢！

Answer 1

您应该使用这些代码与唯一的ID。例如你应该改变ids #loadingMessage和＃loadingMessage2秒。