Question

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?

Answer 1

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);
});