CODEWITHSUNDEEP
phpjavascriptjquery
Patrick Reck
Patrick Reck

Reputation: 11374

Infinite scroll

I am trying to make this infinite scroll script work the way i want. However i can't figure out, how to detect which posts are new in the loadmore.php file, so it won't show the posts already on the page? 

<script type="text/javascript">
$(window).scroll(function()
{
    if($(window).scrollTop() == $(document).height() - $(window).height())
    {
        $('div#loadmoreajaxloader').show();
        $.ajax({
        url: "loadmore.php",
        success: function(html)
        {
            if(html)
            {
                $("#postswrapper").append(html);
                $('div#loadmoreajaxloader').hide();
            }else
            {
                $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
            }
        }
        });
    }
});
</script>

Upvotes: 2

Views: 1109

Answers (4)

Ben Potter
Ben Potter

Reputation: 875

The best way to do this, is to create a page that you can feed an offset to, and it will query for new posts. This is how I have done this in wordpress:

  1. Ensure you are feeding the page an offset (url): http://yourwebsite.com/more/?offset=20
  2. Then get the offset and run a query with the offset.
  3. Then you won't have any of the same results...

I know this sounds vague - so I wrote a tutorial with code - care to have a look? http://benjaminpotter.org/infinite-scroll/

Upvotes: 0

Safari
Safari

Reputation: 3382

why dont you just make a variable on the client, which contains the last id or last timestamp of the list of elements you try to load. and then you just pass this value to the server and your php file can then use this value.

a very common example is the last taken timestamp. when you need some new feeds then you just send this timestamp to the server and he takes eg the next 5 feeds which are older then this time

Upvotes: 0

Evert
Evert

Reputation: 99525

Don't try to 'figure out' which posts are new. Make sure that in your javascript you are aware of the post (through it's id or otherwise) that was last loaded, and send that along to the 'loadmore.php' script.

Your webservice (loadmore.php) should remain stateless, and your frontend (javascript) should be aware of the state (last loaded id).

Upvotes: 5

Berry Langerak
Berry Langerak

Reputation: 18859

Well, simply put: you have to store that information. Guessing that you have some sequence in the information you're trying to load, you can store which id was the last returned the last time, and pass that information as the starting point for new information in the PHP script.

Upvotes: 1

Related Questions