Update table rows in a non-sequential manner using PHP script output
Good evening everyone, this is my first question and I hope I did my stack search at best! I need to monitor multiple devices by querying mysql database and collect information. This data is then presented to the operator in an html table.
I wrote a php script that loads devices from a multidimensional array, iterates over the array and collects data and creates a table.
The structure of the table is as follows:
<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 specified table is directly populated on the first page load; 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 works in Wordpress environment.
It turns out that when there are too many devices and the internet connection is not that fast, the script expires, even if I dramatically increase the timeout period. Therefore, it is not even possible to load the page the first time ...
So I would like to modify my code so that I can treat each row as a single entity with its own refresh period. So when the user first loads the page, he sees n lines (one per device) with the ajax loader image ... then the refresh loop has to run independently for each line so that the user can see the data collected from each database ... then ajax -loader when the script tries to get data, then collected data after collecting it, or an error message stating that it is not possible to collect data since the hour xx: yy: zz. Therefore, updating rows should be somewhat independent of others, for example if updating each row was one closed process. So the update of rows is not done sequentially from the first row to the last.
Hope I have outlined my problem in sufficient detail.
Currently, I feel like I'm stumped. Can someone please show me where to start?
source to share
You have two problems, the server is requesting your monitored service, and the request is between the front user page and your server.
The first one you need to decide is monitoring between your server and another service. You don't have to call every service at the user's request. The server should request services on its own every x seconds or minutes of your choice and store this data in its own database. Then, to send data to the client, that server only needs to query its own database, which should run almost instantly. This method gives you the option to save history or send an email when diagnosing a failure.
The second problem is to refresh your front page, you have a lot of options but you have to keep the number of requests minimal. I suggest you create a notification as a request: your ajax request asks for all the updated value since the last request (you send a timestamp in your request), then a server response with all data that has been updated since that time. When the response is received, you can update the received data in the table by matching the identifiers.
Basically this is the track I would go for, but you still have some solutions, comments if you want accuracy on my suggestion.
source to share