Copying Facebook newsfeed action using ajax & jquery

Hi,

I’ve been writing php for several years - and mainly self-taught so I may have some gaps. I’ve also started looking in to creating ajax scripts and have just started looking in to jquery (I used to use mootools for several months but feel jquery is more supported) for my websites - so thats the background out of the way - tl;dr - I’m a beginner :smiley:

I currently have a database of entries (its for a ticket system) at work and I have a front page that shows the current tickets the user has - this currently uses mootools (I want to change to jquery) and ajax which will refresh it every 7 seconds so that new entries will fade in (I have it currently where a gap will slide in at the top and the new entry will fade in - when a ticket is resolved it fades out and the gap slides close - this also happens underneath when the latest update to the call appears).

Now currently I have it so that ajax refreshes the entire list - and uses php to mark which entries are new since the last time the page was refreshed (7 seconds ago). The whole section is inside div tags which is replaced by the new data when it comes in. Now this has the undesired effect of the whole section seeming to refresh - if you hi-light some text like a server name the hi-light will be lost when the ajax refreshes the whole section - also it limits what you can do with any tickets - say I want it to drop down a input box for quick updates - if the user clicks on a button and the box appears it will be lost when the section refreshes.

What I would like is the way that facebook does it (and most other sites it seems) when a new entry appears it appears at the top and nothing underneath is touched - also new elements appear anywhere in the feed when updates are made.

Is there any tutorials out there - I’ve been googling for weeks now trying various different keywords but never seem to get what I’m looking for - I need something that uses jquery and ajax to do the above?