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?
