Geek asks and answers

Infinite scroll on page loaded by ajax

I have a page (let it be called 1.php) that loads 2.php into a div-box using jQuery-ajax. 2.php prints 20 entries from my database. When I scroll the bottom of the div-box, I want it to load the next 20 entries. Like Facebook, Twitter, etc., etc.

Now I got this behavior, but only when loading 2.php on my own! But not inside the div-box.

How should I do it?

Thanks in advance!

+3
source share
4 answers

The 1.php file should output this:

<div id="content">
</div>

<script type="text/javascript">
  $(document).ready(function() {
    // when we scroll, check the position:
    $(window).scroll(function()
    {
      // if at bottom, add new content:
      if  ($(window).scrollTop() == $(document).height() - $(window).height())
      {
        $.get("2.php",function(data) {
          $("#content").append(data);
        },'html');
      }

    }); 

  });
</script>

If you want to send the iteration number to 2.php, you can remember it in some hidden input and send it as an argument to $ .get ().

Hope this helps.

+7
source

, , Javascript 2.php . , ajax div. Ajax.

+2

. ?

0

More articles:


All Articles