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 scrolling, I want it to load the next 20 records. Like Facebook, Twitter, etc, etc does it.
Now, I've gotten this behaviour, but only when loading 2.php on it's own! But not within the div-box.
How do I go about this?
Thanks in advance!
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.
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.
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/
The key here is detecting the scroll position. Is this working correctly?
