Im trying to build an activty stream which automatically displays the the most recent entries into to a database table, updating every time a new row is entered.
At the moment it works by using Prototype's Ajax.PeriodicalUpdater to constantly check for new entries and then display that to the user but it's jumpy.
I would like to have any new entry found in the database slide in from the top using jQuery's .slidedown animation.
here's what I have at the moment
on the page with the activity stream:
<div id="activity"></div>
and the javascript:
Event.observe(window, 'load', function() {
updater('activity', 'activities.php');
});
function updater(element_id, element_page)
{
new Ajax.PeriodicalUpdater(element_id, element_page, {
method: 'get',
frequency: 1,
decay: 2
});
}
activities.php:
foreach($activities as $activity)
{
// get time since created
$created = strtotime($activity['Activity']['created']);
$time_since = $this->Time->timeAgoInWords($created);
?>
<div id="activity_item">
<span id="type"><?php echo $activity['Activity']['type']?></span>
<span id="created"><?php echo $time_since ?></span><br />
<span id="event"><?php echo $activity['Activity']['event']?></span>
</div>
<?php
}
Any ideas on how to then incorporate the slidedown animation? or am I doing this the wrong way altogether?
You might have better luck using the jQuery periodical updater plugin, found here: https://github.com/RobertFischer/JQuery-PeriodicalUpdater/
As an example, this will poll from /path/to/get/request
and add a new entry to the top of a block with id #feed
(which has a max length of 5 items).
$.PeriodicalUpdater('/path/to/get/request',
{method: 'get', data: '', minTimeout: 10000, maxTimeout: 32000,
multiplier: 2, type: 'json', maxCalls: 0, autoStop: 0},
function(d, success, xhr, handle) {
$("#feed").prepend('<h3>'+d.something+'</h3>');
$("#feed").children().first().css("display", "none");
if ($("#feed").children().length > 5) {
$("#feed").children().last().remove();
}
$("#feed").children().first().addClass("first")
.next().removeClass("first");
$("#feed").children().first().slideDown(200);
});