How would I animate an auto-updating mysql query result? - php

Question

Basically, how would I make an auto-updating mysql query result animated using jquery? I would want it to look like a newsfeed that is animated and slides down when a result it added? How difficuilt would this be to achieve and what would I use to do it?
Thanks,
Cameron

Answer 1

First you need some JS, PHP and HTML skill.
JAVASCRIPT:
function create_ajax()
{
try
{
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
return false;
}
}
}
return ajaxRequest;
}
You need this function in your HTML file, to start the message service:
function StartUp()
{
/** Jquery **/
setTimeout(function() {$('#message').fadeOut('fast');}, 5000);
UserLogService();
}
This function helps to connect to PHP:
function MessageService()
{
setTimeout('MessageService()', 60000);
var ajaxRequest;
ajaxRequest=create_ajax();
ajaxRequest.onreadystatechange =
function()
{
if(ajaxRequest.readyState == 4)
{
message = ajaxRequest.responseText.split(';');
if (message[0])
{
headMessageDisplay(message[0], message[1]);
setTimeout('headMessageNoDisplay()', 30000);
}
}
}
ajaxRequest.open("GET", "xxx.php", true);
ajaxRequest.send(null);
}
In your PHP get the messages:
if ($msg)
{
$this->Show($msg);
exit();
}
PHP: This shows the message from PHP:
private function Show($msg = null)
{
for ($i = 0; $i < count($msg); $i++)
{
$error = $this->html;
$error = str_replace('{MESSAGE}', $msg[$i], $error);
$error = str_replace('{TYPE}', error, $error);
$error = str_replace('{DISPLAY}', 'block', $error);
$this->message .= $error;
}
print $this->message;
}
This makes the message itself:
$r = $_REQUEST["sql"]->Query("SELECT m.id, m.message, t.name as type FROM db_table_message m JOIN db_table_messagetype t ON (t.id = m.type) WHERE m.processing = '0' AND m.user_id = '".$_REQUEST["user"]->Id."'
AND m.date != '0000-00-00 00:00:00' AND m.date <= DATE_SUB(NOW(), INTERVAL -1 MINUTE) LIMIT 1");
$a = $_REQUEST["sql"]->GetRecord($r, 0);
if (!$a["id"])
{
$r = $_REQUEST["sql"]->Query("SELECT m.id, m.message, t.name as type FROM db_table_message m JOIN db_table_messagetype t ON (t.id = m.type) WHERE date = '0000-00-00 00:00:00' AND m.processing = '0' AND m.user_id = '".$_REQUEST["user"]->Id."' LIMIT 1");
$a = $_REQUEST["sql"]->GetRecord($r, 0);
}
if ($a["id"])
{
$_REQUEST["sql"]->Query("UPDATE db_table_message SET processing = '1' WHERE id = '$a[id]'");
}
else
{
$r = $_REQUEST["sql"]->Query("SELECT m.id, m.message, t.name as type FROM db_table_message m JOIN db_table_messagetype t ON (t.id = m.type) WHERE m.user_id = '0' LIMIT 1");
$a = $_REQUEST["sql"]->GetRecord($r, 0);
}
$this->Show($a["message"], $a["type"]);
}
private function Show($message = null, $type = null)
{
if ((!$message) || (!$type)) return false;
switch($type)
{
case "information":
$type = information;
break;
case "warning":
$type = warning;
break;
case "error":
$type = error;
break;
}
print "$message;$type";
Use a PHP Class to get the message from the database... There are many things needed to do this. I nearly forgot to get the old messages from the database on page load by php.
Then, if everything works, add:
ANIMATION
$("selector").fadeIn(slow);
If you want to do the animation with jQuery. :) The animation itself is the last thing you have to worry about. :)

Answer 2

I'll throw my oar in here although this is a similar solution to Dae except using jQuery templates and JSON. I don't work with php myself but creating JSON doesn't seem too difficult with json_encode()
jsFiddle Example

Answer 3

Broadly:
Create a PHP page that returns the results of the MySQL query.
Periodically load() that page with Javascript from the containing page.
Update the contents of the containing element if a difference is found.
Here's a very brief outline. Initially, let's get the results.
// results.php
$sql = "SELECT * FROM `tbl` LIMIT 10 ORDER BY date_created DESC";
if(!$query = mysql_query($sql))
trigger_error(mysql_error());
while($result = mysql_fetch_assoc($query))
print_r($result);
Then make a page to show them.
// index.html
<script type="text/javascript">
function loadResults() {
$('#results').fadeTo('fast' , 0).load('results.php').fadeTo('fast' , 1);
}
$(document).ready(function() {
loadResults();
var interval = self.setInterval(loadResults(), 10000);
});
</script>
<div id="results"></div>
Untested.