I'm using this JavaScript functions to create a JSP page with Infinite Scroll feature.

<script language="javascript" type="text/javascript">

var count = 0;

window.onload = loadSubPage;

$(window).scroll(function(){
    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
    alert("load appLeadershipSubView function calling");
        loadSubPage();
    }
});

function loadSubPage()
{
    alert("load appLeadershipSubView called");
        $.ajax({
        cache: false,
        url: 'appLeadershipSubView.do?count=' + count,
        async : true,
        beforeSend: function(){
        },
        success: function(html){
            alert("success event");
            $('#mainDiv').append(html);
            count++;
        },
        plete: function(){
        }
    }
    );
} 

</script> 

As you can see I'm calling the loadSubPage function to append html content in the appLeadershipSubView page into the #mainDiv. And loadSubPage is also called at the page Load event also.

The Problem is when I scroll down it makes multiple (2 sometimes 3) calls to the loadSubPage function and appends duplicate data into the div.

Since I'm new to JSP and Javascript I couldn't figure out the problem here. Can you please point me out the problem here?

I'm using this JavaScript functions to create a JSP page with Infinite Scroll feature.

<script language="javascript" type="text/javascript">

var count = 0;

window.onload = loadSubPage;

$(window).scroll(function(){
    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
    alert("load appLeadershipSubView function calling");
        loadSubPage();
    }
});

function loadSubPage()
{
    alert("load appLeadershipSubView called");
        $.ajax({
        cache: false,
        url: 'appLeadershipSubView.do?count=' + count,
        async : true,
        beforeSend: function(){
        },
        success: function(html){
            alert("success event");
            $('#mainDiv').append(html);
            count++;
        },
        plete: function(){
        }
    }
    );
} 

</script> 

As you can see I'm calling the loadSubPage function to append html content in the appLeadershipSubView page into the #mainDiv. And loadSubPage is also called at the page Load event also.

The Problem is when I scroll down it makes multiple (2 sometimes 3) calls to the loadSubPage function and appends duplicate data into the div.

Since I'm new to JSP and Javascript I couldn't figure out the problem here. Can you please point me out the problem here?

• javascript
• jquery
• ajax
• jsp
• jquery-events

• Another issue came up with this code. (I wasn't sure about posting as a separate question) This function call works absolutely fine with FireFox but it doesn't work in Chrome. It only calls the function once and doesn't call it again. I didn't get any dialog box asking whether to 'stop generating anymore message boxes' Can you guys help me with this too? :) – direndd Commented Nov 8, 2012 at 6:07
• You should definitely post this as a new question. Also include the relevant parts of your code. – user123444555621 Commented Nov 8, 2012 at 7:38

2 Answers 2

Add a Boolean to make sure there is not an active request. Check to see if it is active before you make a request.

var isActive = false;
$(window).scroll(function(){
    if  (!isActive && $(window).scrollTop() == $(document).height() - $(window).height()){
    isActive = true;

in the callback, set isActive to false

success: function(html){
    $('#mainDiv').append(html);
    isActive = false;

I'd rather use Underscore's throttle function for that!

Much cleaner, non-hackish, and you'll focus on your app's logic rather than doing some callbacks-boolean-reset-magic.