Refresh individual table cells without refreshing whole page - php

Question

I have a table with lots of cells that have little php scripts in them that search a text document called foo.txt for a snippit of numbers. The code really isn't needed to understand my problem but just in case:
<?php
$input = "3.000000";
$file = file_get_contents("foo.txt");
$pos = strrpos($file, $input);
if($pos !== false){
$start = $pos + strlen($input);
$end = strpos($file, "00", $start);
$data = substr($file, $start, $end - $start);
$dataprocessed = round($data, 2, PHP_ROUND_HALF_DOWN);
echo $dataprocessed;
}else{
echo "Error";
}
?>
From that i would get a number like "34.23" which is correct. The problem is that foo.txt changes/gets overwritten every minute, changing that "34.23", but the webpage wont display the new data unless the whole page is refreshed. I want to somehow have it so that the new/overwritten data is displayed in a tag without refreshing the entire page every minute. I have experience in HTML/XHTML, PHP, limited experience in JavaScript/JQuery, and have been reading posts and tutorials on AJAX but cant quite get it to work. Im open to creative solutions and any solution. Thanks so much in advance!

Answer 1

You can use setInterval and $.load() to use AJAX to reload parts of your page every couple of seconds:
$(function(){
setInterval(function(){
$('div#table-container').load('website_url.php?randval=' + Math.random() + ' div#table-container table');
},10000);
});
Every 10 seconds, this will load website_url.php via AJAX and grab just the div#table-container table portion and insert into the current page by replacing what is currently inside div#table-container
the ?randval=' + Math.random() is a workaround to solve an IE6 caching issue, if you are worried about IE compatibility.
http://api.jquery.com/load/

Answer 2

if you id your table cells in a uniform fashion like:
<tr>
<td id ="a1"></td>
<td id ="a2"></td>
<tr>
<tr>
<td id ="b1"></td>
<td id ="b2"></td>
<tr>
then have an ajax call set up on an interval to a php page, thats server chages in JSON format like: [{'cell': 'a1', 'value': '34.7}];
you could replace them with calls like:
for (item in results) {
$("#" + item.cell).val(item.value);
}
The only thing left after that is keeping a serial# for the data. Every time it changes, it gets a new serial number. So when the client askes for changes, it presents a serial number, and you can update it. The next time that client askes it should present the newest serial number. That way you aren't constantly sending all changes to every client.

Answer 3

I would use AJAX with the setInterval to check if changes are to be made (comet) nd for the tagging get the number of column and line and use a nth-child() modifier with jquery example:
$(table#example tr:nth-child(2) td:nth-child(5)).html('my new html answer');
// meaning 2nd row 5th column
To obtain the nth child values, possibly useful, you would use
$(this).index()+1 because nth-child is not 0 based