1

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?

PhilTilson
  • 55
  • 5

1 Answers1

1

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>
Nils Kähler
  • 2,645
  • 1
  • 21
  • 26
  • Thank you for your reply, Nils. I am unfamiliar with the construction ```const startRefresh = () => {``` etc. Could you explain, please, as I can't get this working! – PhilTilson Sep 28 '22 at 15:41
  • Forget the last comment - it is now working fine! Just one further question: I have a number of buttons on the form which are of the usual format: ``````. I now need to submit a post from the 'Confirm' button on my modal form. This is simply a piece of text within a 'span' which calls the 'startRefresh' function. How can I make this submit a value like a n ormal Form POST? – PhilTilson Sep 28 '22 at 15:59
  • @PhilTilson, so if I'm reading your question correctly, you are asking how to submit before you refresh the page. If that is the case then you might want to check this question, and perhaps switch the statements around. https://stackoverflow.com/questions/47459051/execute-javascript-function-before-submitting-the-form – Nils Kähler Oct 03 '22 at 07:02
  • Not quite, Nils. I've tried to post the relevant code, but the system won't let me post anything over a few dozen characters! The stop and start refresh is fine now, but I only want to submit the form if I click the Confirm button, but NOT if I click the Cancel button. – PhilTilson Oct 04 '22 at 10:28