Jump to content

Archived

This topic is now archived and is closed to further replies.

CloudSex13

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

Recommended Posts

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. :)

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.