CODEWITHSUNDEEP
javascriptjqueryajax
HiDd3N
HiDd3N

Reputation: 494

load content by ajax

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

Upvotes: 0

Views: 124

Answers (1)

Subodh
Subodh

Reputation: 2214

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.

Upvotes: 1

Related Questions