Update data in a table in a <DIV> every 60 seconds

Associate
Joined
27 Jun 2006
Posts
1,473
Evening all.

I have a <DIV> with a bit of PHP code in it that tries to connect to certain ports on various servers. If it connects it puts a tick in the box, if it fails a red cross - basic monitoring if you like.

Now, is there an easy way that I can refresh the PHP code in the <DIV> say every 5 minutes.

The PHP code at the mo is (with server name / IP eddited!):

PHP:
Table row:

<tr>
 <td>hostname.0hai.com</td>
 <td align="center"><?php getStatus("xx.xx.xx.xx", 80); ?></td>
 <td align="center"><?php getStatus("xx.xx.xx.xx", 21); ?></td>
 <td align="center"><?php getStatus("xx.xx.xx.xx", 110); ?></td>
 <td align="center"><?php getStatus("xx.xx.xx.xx", 25); ?></td>
 <td align="center"><?php getStatus("xx.xx.xx.xx", 22); ?></td>
 <td align="center"><?php getStatus("xx.xx.xx.xx", 1080); ?></td>
</tr>

The getStatus function:

function getStatus($name, $port)
{
 $fp = fsockopen($name, $port, $errno, $errstr, 3);
 if (!$fp) 
 {
  $status = "img/cross.gif";
 }
else
 {
  $status = "img/tick.gif";
 }
		
 print "<img src='".$status."'>";
}

So all I want to do really is refresh the table row every 5 minutes without refreshing the whole page.

Any advice appreciated before I get the meta refresh tag going!

M.
 
You can do this using an ajax request and updating the DOM accordingly, otherwise you'll have to refresh the page.
 
updatestatus.php:
Code:
<?php

 if(!isset($_GET['name']) && !isset($_GET['port'])) die ("Required values were not set");

 $name = trim($_GET['name']);
 $port = trim($_GET['port']);

 $fp = fsockopen($name, $port, $errno, $errstr, 3);
 if (!$fp) 
 {
  $status = "img/cross.gif";
 }
else
 {
  $status = "img/tick.gif";
 }
        
 print "<img src='".$status."'>|" . $port;

?>

the HTML page:
Code:
<html><head>
<script src="jquery.js"></script>
<script>

function updateRow(name, port) {
$.get("updatestatus.php", { name: name, port: port }, function(data){
	var resparray = data.split("|");
	$("table tr td").filter(function(){
		return $(this).attr("id") == resparray[1];
	}).html(resparray[0]);
});
}

function updateTable() {
updateRow("xx.xx.xx.xx", 80);
updateRow("xx.xx.xx.xx", 21);
updateRow("xx.xx.xx.xx", 110);
updateRow("xx.xx.xx.xx", 25);
updateRow("xx.xx.xx.xx", 22);
updateRow("xx.xx.xx.xx", 1080);
}

onload=setInterval(updateTable, 300000);

</script></head><body>

<table>
<tr>
 <td>hostname.0hai.com</td>
 <td align="center" id="80"></td>
 <td align="center" id="21"></td>
 <td align="center" id="110"></td>
 <td align="center" id="25"></td>
 <td align="center" id="22"></td>
 <td align="center" id="1080"></td>
</tr></table></body></html>

This is untested! But I think it should work.

The only thing you need to remember is that I'm very used to using jQuery for AJAX related things, so you'll need to download a copy and stick it in the same directory if you want to use the bits of AJAX I've written here. Don't forget to rename it to "jquery.js".

You also need to fill your IP addresses in the JavaScript back in ;)

I've probably made some mistakes but that should be the gist of it. I'm sure more knowledgeable people will be along soon to correct me :)

Jon

Edit: Mistake.
 
Last edited:
Back
Top Bottom