load content by ajax

Question

i have created this ajax script for loading data.

$("#submit").click(function(e){
    e.preventDefault()  
    var loading = "<img src='/images/loading.gif' alt='Loading...' />";
    var scrolltop=$('#scrollbox').attr('scrollTop');
    var scrollheight=$('#scrollbox').attr('scrollHeight');
    var windowheight=$('#scrollbox').attr('clientHeight');
//  var post = $(this).attr("name") + "=" + $(this).val();
    var form_data = $('#search_form').serialize();// + "&" + post ;

    var scrolloffset=20;
    $('#search').html(loading);
    $.post("dosearch.php",form_data,function(newitems) {
        $('#content').append(newitems);
            });
        if(scrolltop>=(scrollheight-(windowheight+scrolloffset))){
            $.post("dosearch.php",form_data,function(newitems) {
        $('#content').append(newitems);
            });
        }     
        });
});

this script will take form data and serialize them and post them to dosearch.php after that dosearch will post data which we search for Limited by 0,6. when scroller reach to bottom of result's div i want to fetch more content and for that reason i created this function which will take our form data again and number of div in my result div...ill then use this div result just in case to limit $number,6.

function scroll_result(form_data){
    var loading = "<img src='/images/loading.gif' alt='Loading...' />";
    var scrolltop=$('#scrollbox').attr('scrollTop');
    var scrollheight=$('#scrollbox').attr('scrollHeight');
    var windowheight=$('#scrollbox').attr('clientHeight');
    var scrolloffset=20;
    var divnumber = $('#content').children().size();
    var form_data = form_data + "&size=" + divnumber;

    if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))
    {
        //fetch new items
        $.post('dosearch.php', form_data, function(newitems){
        $('#content').append(newitems);
        });
    }
    setTimeout('scroll_result(form_data)', 1500);
}

this function dont work and i need some help on this

thanks in advance...

Answer 1

I just setup a sample scroll listening application here :

http://jsfiddle.net/E2wj2/2/

You need to listen to scroll event for your scrollbox ,

$('#scrollbox').scroll(function(){
  console.log('scrolling');
  scrolltop=$('#scrollbox').attr('scrollTop');
  if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) {
    //do whatever you wish to do
  }
});

Hope this helps.