views:

208

answers:

1

have this code that calls an ajax whenever the scroll of a div hits the end. It's suppose to be an auto-dynamic scroll. This ajax gets the next X itens of the list.

 $("#gvContacts").scroll(function(){
     var scrolltop=$('#gvContacts').attr('scrollTop');  
     var scrollheight=$('#gvContacts').attr('scrollHeight');  
     var windowheight=$('#gvContacts').attr('clientHeight');                             

     if(scrolltop==(scrollheight-(windowheight)))  
     {                                
        var p = eval($("#pageNumber").val());        
        $("#pageNumber").val(p + 1); // This updates what page should the ajax get next
        loadRelatedFilters(false); //This call an ajax to load more 
     }
 }

It works fine on FF, Chrome... it also works on IE. but it hits twice, can't figure out. Everytime it hits the end of the list it gets 2 pages instead of one.

+2  A: 

It sounds like you need to debounce the scroll event. However, what it really sounds like is that you're working on an "infinite scroll" - am I wrong?

If so - just use what's already been written! http://www.infinite-scroll.com/

Matt Ball
You're right! I just kept my code with the debounce, though! Thank you! Great help!
EduardoMello
No problemo. :)
Matt Ball