Preventing data re-submission with WebServer autorefresh

Projects Programming
1

Hi all

I have designed a kind of building automation system using an arduino distributed approach with a number of arduino micros collecting data from sensors, operating relays etc. Everything gets collected/ controlled by a MEGA though an RS485 link. I am now trying to design a webserver on the mega (with an ethernet shield installed)

See screenshot attachment..

Webpage is done in html with CSS for appearance formation.

I am using the following button definition for the top row of green buttons:

<a href="?1=01" class="button">Sensors</a>

The above when clicked, the browser sends the value of '01' to the webserver which then loads from the SD card a new webpage. For example if CONTROL is clicked, the control.htm is loaded .

In addition all pages have the auto-refresh enabled using:

<meta http-equiv="refresh" content="20">

The above auto re-loads the page every 20s so that the data from sensors is updated.

The problem I am facing is that each time the page is reloaded, the browser also sends again the value of the last button clicked. So if the first green button is clicked, then every 20s the value of '01' is sent to the webserver.

Both my html as well CSS skills are limited and I couldn't figure out how to stop this from happening.

Does anyone know how to prevent this ?

Thanks a lot for your help!

screen.png
screen.png1856×606 49.1 KB

2

If you only need to update the sensor information every 20 second seconds, rather than refresh the entire page, use an AJAX request.
Example
kevin

3

If you only need to update the sensor information every 20 second seconds, rather than refresh the entire page, use an AJAX request.

I didnt mention earlier that I am using the FS (file separator) character in the CSS file to detect where to print the real time value of each of the sensors and other dynamic data. Is this still possible with the AJAX example you mentioned?

4

I'm not sure to be honest. Web stuff is not my forte. I would assume so though because the AJAX request is simple getting data in the form of XML from the server. What you do with that data is up to you.