Good evening everybody,
this is my very first question and I hope I've done my search
in stack's archive at best!!!
I need to monitor several devices by querying theyr mysql database and gather some informations. Then these informations are presented to the operator
in an html table.
I have wrote a php script wich loads devices from a multidimensional
array, loops through the
array and gather data and create the table.
The table structure is the following:
<table id="monitoring" class="rt cf">
<thead class="cf">
<tr>
<th>Device</th>
<th>Company</th>
<th>Data1</th>
<th>Data2</th>
<th>Data3</th>
<th>Data4</th>
<th>Data5</th>
<th>Data6</th>
<th>Data7</th>
<th>Data8</th>
<th>Data9</th>
</tr>
</thead>
<tbody>
<tr id="Device1">
<td>Devide 1 name</td>
<td>xx</td>
<td><img src="/path_to_images/ajax_loader.gif" width="24px" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="Device2">
<td>Devide 1 name</td>
<td>xx</td>
<td><img src="/path_to_images/ajax_loader.gif" width="24px" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="DeviceN">
<td>Devide 1 name</td>
<td>xx</td>
<td><img src="/path_to_images/ajax_loader.gif" width="24px" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
The above table is directly populated when I first load the page; then, with a very simple function, i update this table every minute without reloading the page:
<script>
var auto_refresh = setInterval(
function() {
jQuery("#monitoring").load('/overview.php').fadeIn("slow");
var UpdateTime= new Date();
var StrUpdateTime;
StrUpdateTime=
('0' + UpdateTime.getHours()).slice(-2) + ':'
+ ('0' + UpdateTime.getMinutes()).slice(-2) + ':'
+ ('0' + UpdateTime.getSeconds()).slice(-2);
jQuery("#progress").text("Updated on: " + StrUpdateTime);
}, 60000);
</script>
The above code runs
in a wordpress environment.
It comes out that when devices are too much and internet connection is not that fast, the script times out, even if i dramatically increase the timeout period. So it is impossible even to load the page the first time...
Therefore I would like to change my code so that I can handle each row as a single entity, with its own refresh period. So when the user first loads the page, he sees n rows (one per device) with the ajax loader image... then an update cycle should start independently for each row, so that the user sees data gathered from each database... then ajax loader when the script is trying to retrieve data, then the gathered data once it has been collected or an error message stating that it is not possible to gather data since hour xx:yy:zz.
So rows updating should be somewhat independent from the others, like if each row updating was a single closed process. So that rows updating is not done sequentially from the first row to the last.
I hope I've sufficiently detailed my problem.
Currently I feel like I am at a dead-end.
Could someone please show me somewhere to start from?
