Zwei verschiedene Onscroll Seite Anfrage auf einer Seite

Question

Ich habe zwei Divs, wenn ich auf einem Div scrollen funktioniert es gut, aber beim Scrollen andere div es nur zeigen laden. Ich habe zwei Methoden load_contents (was in Ordnung funktioniert) und Nachrichten (die nicht auf Scroll-Arbeit) diese Aussage in diesen Methoden

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

Hier die ist Code

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

Danke!

Answer 1

Sie sollten diesen Code mit eindeutigen IDs verwenden. Zum Beispiel sollten Sie IDs #loadingMessage und # loadingMessage2 für Sekunde ändern.