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

Question

我有两个div当我滚动一个div工作正常但滚动其他div只显示加载。我有两个方法load_contents（工作正常）和消息（不能处理滚动） 在这些方法中使用此语句

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

这是代码

<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作为第二个。