PHP/jQuery Auto-Refresh: Only Fade-In New Rows in Database Since Last Refresh

Hi all,

Thanks for reading.

I'm running a script using jQuery that auto-refreshes a <div> on the index page from an external PHP script to get all the rows in a database and display them on the index page. The script works great - here it is as follows:

<script type="text/javascript">

$(document).ready(function() {

$("#responsecontainer").fadeOut("fast").load("getrows.php").fadeIn("slow");

var refreshId = setInterval(function() {
$("#responsecontainer").fadeOut("fast").load('getrows.php').fadeIn("slow");
}, 5000);

$.ajaxSetup({ cache: false });

});

</script>

The getrows.php script I'm working with looks like this:

<?php 

$rowsQuery = mysql_query("SELECT * FROM Happenings WHERE HappeningDate='$today'");

if (mysql_num_rows($rowsQuery) == 0) {
$happeningsToday = "There are no happenings today.";
} else {

$allHappeningsToday = 1;

while ($getHappeningsToday = mysql_fetch_array($rowsQuery)) {

$happeningName = stripslashes($getHappeningsToday['HappeningName']);
$happeningDate = $getHappeningsToday['HappeningDate'];
$happeningDescription = $getHappeningsToday['HappeningDescription'];

if ($allHappeningsToday == 1) {

$happeningsToday .= "
<div class=\"box\">
<p>".$happeningName." | ".$happeningDate." | ".$happeningDescription."
</div>";

$allHappeningsToday = 2; 

} else { 

$happeningsToday .= "
<div class=\"box\">
<p>".$happeningName." | ".$happeningDate." | ".$happeningDescription."
</div>";

$allHappeningsToday = 1; 

}

}

}

echo $happeningsToday;

?>

This script works great as well.

Currently, the auto-refresh jQuery script as you can see if getting and fading in/out all of the rows.

Off of the above getrows.php script, is there a way after I could get only the newly created rows since the last refresh and only fade those in and out while leaving the others already loaded by the auto-refresh script to not fade in/out?

Any ideas, thoughts or suggestions would be unbelievably helpful.

Thank you very much.

I came up with an idea of adding a field to the Happenings table in my database called HappeningTodayDisplayed. If it's set to 1, then the auto-refresh script should not fade in/out. But, if HappeningTodayDisplayed is set to 0, then is should fade in/out.

I placed these queries separately in the getrows.php file using the GET method, and have links like the following:

<script type="text/javascript">

$(document).ready(function() {

$("#responsecontainer").load('getrows.php?alreadydisplayed');

var refreshId = setInterval(function() {
$("#responsecontainer").fadeOut("fast").load('getrows.php?justadded').fadeIn("slow");
$("#responsecontainer").load('getrows.php?alreadydisplayed');
}, 5000);

$.ajaxSetup({ cache: false });

});

</script>

However, I'm frustrated to see this only displays the events already displayed...

After further thought, the above probably only displays the happenings already displayed because the <div> ID is the same, however, I plan to implement pagination for all the happenings and would need all these in that one <div>.

Hope that helps to clarify.