Infinite scrolling within ajax-loaded page

Question

I have a page(let\'s call it 1.php) that loads 2.php into a div-box using jQuery-ajax. 2.php prints 20 records from my database. When I reach the bottom of the div-box when

Answer 1

Consider using waypoints plugin for jQuery: http://imakewebthings.github.com/jquery-waypoints/

And give a look at the Infinite scrolling example: http://imakewebthings.github.com/jquery-waypoints/infinite-scroll/

Answer 2

You probably have some initialization Javascript code in 2.php to setup the scrolling event handler. This initialization code is not executed when you load the page with ajax and put it inside a div. You will need to execute the same initialization code after processing the Ajax request.

Answer 3

The key here is detecting the scroll position. Is this working correctly?

Answer 4

File 1.php 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 could remember it in some hidden input and send it as argument to $.get().

Hope it helps.