한 페이지에 두 개의 서로 다른 onscroll 페이지 요청

Question

하나 div에서 스크롤 할 때 div가 두 개 있습니다. 다른 div를 스크롤하면 표시된 로딩이 표시됩니다. 나는 여기에

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

가 있습니다 이러한 방법

$.post('ListOfChatters.php', {'page': track_page}, function(data){ }//this method fetch data from Database and 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

고유 코드와 함께이 코드를 사용해야합니다. 예를 들어 ids #loadingMessage와 #loadMessage2를 두 번째로 변경해야합니다.