1つのページで2つの異なるオンスクリーンページリクエスト

Question

1つのdivをスクロールすると2つの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

これらの方法でこの文を使用して2つのメソッド（正常に動作している）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を2秒間変更する必要があります。