Trying to change <td bgcolor> when ajax posts new data

matthewst · 03-18-2010, 03:01 PM

I have ajax successfully polling and displaying new data from my database. I would like for the table cells to flash or change color then fade back to normal when there is new data. How would I do this? Please be gentle, I'm still new to javascript.

Code:

<?php
// prevent caching (php)
header('Cache-Control: no-cache');
header('Pragma: no-cache');
header('Expires: ' . gmdate(DATE_RFC1123, time()-1));
?>
<html>
<head>
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<script type="text/javascript">
function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHttp");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

var http = createRequestObject();
var httpjob = createRequestObject();

function sndReq(action) {
  http.open('get', 'ajax.php');
  http.onreadystatechange = handleResponse;
  http.send(null);
}
function handleResponse() {
  if(http.readyState == 4) {
    var response = http.responseText;
    document.getElementById('foo').innerHTML = response;
  }
}

function jobLog(joblog) {
  httpjob.open('get', 'ajax2.php');
  httpjob.onreadystatechange = handleJoblog;
  httpjob.send(null);
}
function handleJoblog() {
  if(httpjob.readyState == 4) {
    var response = httpjob.responseText;
    document.getElementById('bar').innerHTML = response;
  }
}

setInterval('sndReq()', 5000);
setInterval('jobLog()', 10000);
</script>
</head>
<body>
<table>
<tr>
<td id="foo" bgcolor="#009999">
retrieving data...
</td>
</tr>
<tr>
<td id="bar" bgcolor="#FF9933">
retrieving data...
</td>
</tr>
</table>
</body>
</html>

matthewst · 03-18-2010, 09:32 PM

Certainly somebody here can show me how to do this.

tfit · 03-19-2010, 12:24 AM

[code]<?php
// prevent caching (php)
header('Cache-Control: no-cache');
header('Pragma: no-cache');
header('Expires: ' . gmdate(DATE_RFC1123, time()-1));
?>

not sure if header likes your commenting.
To answer your question:
document.getElementById('bar').style.color = "red"; will do it

Code:

function handleJoblog() {
  if(httpjob.readyState == 4) {
    var response = httpjob.responseText;
    document.getElementById('bar').innerHTML = response;
 document.getElementById('bar').style.color = "red"; will do it
 }
}

A1ien51 · 03-19-2010, 05:10 AM

Code:

<td id="foo" bgcolor="#009999">

is very old and outdated way of setting background color. Use CSS.

Eric

matthewst · 03-19-2010, 07:20 PM

Thank you for your help. Now, one last question. How do I set it to only change color when the data is different?

If data = 2 and on the next response data = 2 then the color stays the same, but on the third response data = 3 then the color changes briefly just to draw attention then fades back to normal.

matthewst · 03-19-2010, 09:17 PM

Okay I was able to make it recognize changes using sessions.

queries page:

Code:

session_start();

//job log entries
$total_job_log_entries = '0';
$total_job_log_entries = ceil(mysql_num_rows(mysql_query("SELECT id FROM job_log WHERE id > '1'")));
if ($total_job_log_entries != $jle_old){
echo "Total number of job log entries: " . $total_job_log_entries . "<br>";
}else{
echo 'noupdate';
}
$HTTP_SESSION_VARS["jle_old"] = $total_job_log_entries;
mysql_close();

ajax page:

Code:

function handleJoblog() {
  if(httpjob.readyState == 4) {
    var response = httpjob.responseText;
	if(response != 'noupdate') {
    document.getElementById('bar').innerHTML = response;
	document.getElementById('bar').style.color = "black"
	}
  }
}

Now the only problem is I don't want the page to actually echo "noupdate". Basically I want this:

if(response = 'noupdate') {
then echo old number and leave color alone
}
if(response != 'noupdate') {
echos new number and the background fades from one color to another
}

tfit · 03-20-2010, 08:43 AM

Quote:

if(response = 'noupdate') {
then echo old number and leave color alone
}
if(response != 'noupdate') {
echos new number and the background fades from one color to another
}

How about
switch ($response) {
case update:
yadayada;
break;
default :
yadayada;
}

matthewst · 03-22-2010, 02:47 PM

Okay, I'm having trouble thinking outside the box today.

I can make php remember and compare the results from running the same query twice:

Code:

session_start();

//job log entries
$total_job_log_entries = '0';
$total_job_log_entries = ceil(mysql_num_rows(mysql_query("SELECT id FROM job_log WHERE id > '1'")));
if ($total_job_log_entries != $jle_old){
echo "Total number of job log entries: " . $total_job_log_entries . "<br>";
}else{
echo "noupdate";
}
$HTTP_SESSION_VARS["jle_old"] = $total_job_log_entries;
mysql_close();

If the new result ($total_job_log_entries) is different then the previously run query ($jle_old) then echo the new result. If they are the same then echo noupdate. Pretty standard stuff in php. My problem is; How do I make js remember and recognize the difference? Is there an invisible flag I can use? Ex:

Code:

session_start();

//job log entries
$total_job_log_entries = '0';
$total_job_log_entries = ceil(mysql_num_rows(mysql_query("SELECT id FROM job_log WHERE id > '1'")));
if ($total_job_log_entries != $jle_old){
echo "Total number of job log entries: " . $total_job_log_entries . "<br>";
}else{
$flag = "HEY JS THIS ONE IS DIFFERENT SO DO SOME CRAZY STUFF!!";
echo 'noupdate';
}
$HTTP_SESSION_VARS["jle_old"] = $total_job_log_entries;
mysql_close();

matthewst · 03-22-2010, 02:53 PM

I like tfits idea but I can't see how to implement it since I need to echo the response whether it's new or not. I just need js to be able to recognize the diff and act accordingly.

What I mean to say is I need js to echo the "Total number of job log entries : 1234" even if it's old data. I just want js to acknowledge new data by changing color briefly or by flashing or something.

tfit · 03-22-2010, 03:03 PM

Quote:

Originally Posted by matthewst

I like tfits idea but I can't see how to implement it since I need to echo the response whether it's new or not. I just need js to be able to recognize the diff and act accordingly.

What I mean to say is I need js to echo the "Total number of job log entries : 1234" even if it's old data. I just want js to acknowledge new data by changing color briefly or by flashing or something.

I wouldn't do this on the clientside. The server already has that data so why not evaluate it there. what i meant with the switch statement is that you can create your wanted response and give that response to javascript to echo it.

matthewst · 03-22-2010, 04:47 PM

I agree that it should be done on the server side, but how do I tell js we have new (meaning different then the last time the query was run) data and to not just display (as if the data has not changed) but to also alert the user somehow?

matthewst · 03-22-2010, 05:00 PM

First time: query runs output is "blah 123"
Second time: query runs output is "blah 123"
//so js only needs to echo the responses
Third time: query runs output is "blah 124"
//here I can make php recognize the difference but since all js sees is "blah 124" how do I make js recognize this is new data?

I can make php output something different such as "124 is the new blah" but that's not what I need. Js only echos the response it gets from php so how do I get js to acknowledge new (meaning different) data? Is there a variable I can pass between php and js other than "response"?

tfit · 03-22-2010, 05:50 PM

Quote:

Originally Posted by matthewst

Code:

session_start();
//job log entries
$total_job_log_entries = '0';
$total_job_log_entries = ceil(mysql_num_rows(mysql_query("SELECT id FROM job_log WHERE id > '1'")));
if ($total_job_log_entries != $jle_old){
echo "Total number of job log entries: " . $total_job_log_entries . "<br>";
// add this
$response = "update";
echo $response;
}else{
// remove this line $flag = "HEY JS THIS ONE IS DIFFERENT SO DO SOME CRAZY STUFF!!";
echo 'noupdate'; // change $response = "noupdate";
// echo $response;
}
$HTTP_SESSION_VARS["jle_old"] = $total_job_log_entries;
mysql_close();

It doesn't solve your whole problem, but it might bring it close;
what if you move your $flag variable inside your if? Because basically your testing if something has changed. Your else remains the same as nothing has changed.

I got a bit distracted :-). Remove the $flag variable and echo "updated"

matthewst · 03-22-2010, 07:16 PM

We are at 99% completion!

The last step is to go from having js echo "number 123" and "Update! number 124" to echoing "number 123" and "number 124"

Any ideas?

matthewst · 03-22-2010, 07:33 PM

Basically I'm looking for:
$response = invisible character;
echo $response;

That way the user only sees the color change and not "Update!"