I have a web page that monitors a process and refreshes every ten seconds. To do this I simply have a statement in the <Head> section of the HTML: <meta http-equiv="refresh" content="10">
This works fine, but...
I have a button on the page that allows for a remote reset of the system. In order to confirm this action, I have a modal page that pops up asking the user to confirm. However, if the original page has been displayed for, say, nine seconds, the modal page shows for only one second before being refreshed and disappearing!
Is there a simple way that I can disable the page refresh while the modal page is displayed, and then restart it once the confirmation has been given?
You need some javascript to handle the pause of the page.
As a note you should probably handle the refreshing of the content with an Ajax call or similar, and then update the content that way. As a note W3C has a note concerning the refresh value.
Note: The value "refresh" should be used carefully, as it takes the control of a page away from the user. Using "refresh" will cause a failure in W3C's Web Content Accessibility Guidelines.
A simple solution could be to stop the window from refreshing when the modal is open and resume the refresh functionality when the user dismisses the modal.
<head>
<meta http-equiv="refresh" content="1">
<title>Refresh page</title>
</head>
<body>
<p id="demo"></p>
<button onclick="stopRefresh()">pause</button>
<button onclick="startRefresh()">start</button>
<script>
const d = new Date();
document.getElementById("demo").innerHTML = "" + d.getTime();
const stopRefresh = () => {
window.stop(); // Use this to stop the refresh: when modal opens
}
const startRefresh = () => {
document.location.reload(); // Resume the refresh: when modal closes
}
</script>
</body>