Prevent duplication of infinite scroll ajax loader

Question

it may be too late for me to see a clear solution here, but I thought that I would get some thoughts from someone with an opinion ...

The site I'm working on has a long list of user posts. I have all the scroll event handlers working in ajax in the next batch of 100 posts when you reach or are approaching the bottom.

my question is ... How to prevent the following scenario?

• UserX visits the site and downloads messages 1-100
• Another 10 users visit the site and add another 10 posts.
• UserX scrolls down and downloads messages 101-200, which used to be messages 91-190.
• UserX ends up duplicating 91-100 messages per page

I will include a stripped down version of my code below if it helps anyone else

$.ajax({ type:'POST', url:"/userposts.php", data:{ limit: postCount }, success:function(data) { $("postsContainer").append(data); if ( $("postsContainer").find("div[id='lastPostReached']") ) { // unbind infinite scrolling event handlers } }, dataType:'html' }); 

in my PHP script I have essentially the following:

 if ( ! isset($_POST["limit"]) ) { $sql .= " LIMIT 101"; // initial request } else { $sql .= " LIMIT {$_POST["limit"]},101 } $posts = mysql_query($sql); while( $post = mysql_fetch_assoc($posts) ) { /* output formatted posts */ } // inform callback handler to disable infinite scrolling if ( mysql_num_rows($posts) < 101 ) { echo '<div id="lastPostReached"></div>'; } 

This gives me endless scrolling beautiful and easy, but how can I prevent the hypothetical duplicates that will appear when new records are added to the table between ajax requests?

Answer 1

You define a timestamp from php that indicates the average value at the time the page loads (for example, var _loadTime = <?php echo time(); ?> ), And then pass that value as part of the Ajax data configuration object along with the limit.

Then, on the server side, you can exclude any messages created after this time and save your list.

You can also take one more step and use this time along with the basic ajax long polling method to notify the user of new messages from the moment of downloading / last loading of new messages, similar to Facebook and Twitters feeds.

Answer 2

Update your ajax request so that, in addition to the limit parameter, you go through the current range of message identifiers (I assume that messages have some sort of unique identifier). Update your php to take these parameters into account when receiving the next set of messages.

That is, instead of saying "give me another 100", the request is "give me 100, starting with id x".

(Sorry, I don't have time to write sample code for this.)

Answer 3

Just use a unique identifier identifier for messages and consider the opposite.

First user requests for requests 603-503

Ten users get on the page and add comments, so the highest comment is now 613

User scolls down and requests 503-403

Is the problem resolved? :)