-
Jan 28th, 2022, 09:02 AM
#1
[RESOLVED] Question related to auto refreshing a web page
I have a page that is set to refresh every 60 seconds and this is fine under normal conditions.
The potential issue is that if something goes wrong with a post to the server the page should display some message to let the user know what happened.
This is where the auto refresh becomes a possible issue. If the post was just before the page is about to refresh then it can be that the user never actually sees the message or at least I think that is the case.
The page needs to refresh automatically every 30-60 seconds.
When a message comes back from the server it needs to stay on screen for at least a few seconds so the user has an indicator that the last operation did not work and at least a hint as to why.
So I am trying to find a way that I can have the page refresh at a preset interval yet be able to insure that refresh does not happen for let's say 5 seconds after a failed post operation.
Right now it is using an HTML tag to do the auto refresh
Is there a way I can do this with Java script and have the refresh paused or temporarily disabled within one of my javascript functions?
-
Jan 28th, 2022, 09:08 AM
#2
Re: Question related to auto refreshing a web page
Would I be able to do the above using settimeout and cleartimeout if I remove the html page refresh?
Possibly use the settimeout set to 60 when the page loads then cleartimeout when they click the button and then another settimeout after it gets the response?
That way it seems like if the user does not hit a button within the 60 seconds the page would auto refresh.
If they do click the button then it could be made to wait a few seconds after it gets the response or refresh immediately depending on the response.
Edit: I think I have convinced myself that this will work but I won't have time to test until later this evening so if anyone knows for sure or has a better idea I would like to hear it.
Last edited by DataMiser; Jan 28th, 2022 at 09:26 AM.
-
Jan 28th, 2022, 09:58 AM
#3
Re: Question related to auto refreshing a web page
You can use the "refresh" meta tag to automatically refresh the page:
Code:
<meta http-equiv="refresh" content="60">
With regards to ensuring the user sees an error message if a post fails prior to refreshing the page, if you have something that blocks the UI thread (like an alert) then the refresh won't occur until after the user dismisses the blocking event. Look at this example:
Code:
<!doctype html>
<html lang="en">
<head>
<title>Auto-Refresh Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="5">
</head>
<body>
<script>window.addEventListener('load', () => { alert(''); }, false);</script>
</body>
</html>
-
Jan 28th, 2022, 01:34 PM
#4
Re: Question related to auto refreshing a web page
Yeah I am using the meta tag already.
Alert box is not really a good option as the text is small and it expects user interaction.
My goal is to show a message that the user does not need to respond too and just allow them time to see if it they are paying attention in hopes that it will limit confusion on the part of the user and support calls routed to me.
-
Jan 28th, 2022, 02:23 PM
#5
Re: Question related to auto refreshing a web page
Another option is to setup a while loop after you show the error message. Because multithreading doesn't apply to JavaScript, the while loop will just tie up the UI thread. This is an example using the Bootstrap-Confirmation-Dialog (github) library I built to display the message:
Code:
<!doctype html>
<html lang="en">
<head>
<title>Auto-Refresh Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="1">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
var confirmationDOM=function(configuration){configuration=configuration||{};configuration.title=configuration.title||"";configuration.closeIcon=configuration.closeIcon||false;configuration.message=configuration.message||"";configuration.no=configuration.no||{};configuration.no.class=(configuration.no.class||"btn btn-secondary").trim()+" confirmation-no";configuration.no.text=configuration.no.text||"Cancel";configuration.yes=configuration.yes||{};configuration.yes.class=(configuration.yes.class||"btn btn-primary").trim()+" confirmation-yes";configuration.yes.text=configuration.yes.text||"Ok";var modal=document.createElement("div");modal.classList.add("modal");modal.id="confirmation-modal-"+new Date().getTime();modal.setAttribute("tabindex","-1");var modalDialog=document.createElement("div");modalDialog.classList.add("modal-dialog");var modalContent=document.createElement("div");modalContent.classList.add("modal-content");var modalBody=document.createElement("div");modalBody.classList.add("modal-body");var modalBodyText=document.createElement("p");modalBodyText.textContent=configuration.message;modalBody.appendChild(modalBodyText);var modalFooter=document.createElement("div");modalFooter.classList.add("modal-footer");var modalFooterNoButton=document.createElement("button");modalFooterNoButton.classList.add(...configuration.no.class.split(" "));modalFooterNoButton.textContent=configuration.no.text;modalFooterNoButton.setAttribute("data-bs-dismiss","modal");var modalFooterYesButton=document.createElement("button");modalFooterYesButton.classList.add(...configuration.yes.class.split(" "));modalFooterYesButton.textContent=configuration.yes.text;modalFooterYesButton.setAttribute("data-bs-dismiss","modal");modalFooter.appendChild(modalFooterNoButton);modalFooter.appendChild(modalFooterYesButton);modalContent.appendChild(modalBody);modalContent.appendChild(modalFooter);if(configuration.title||configuration.closeIcon){var modalHeader=document.createElement("div");modalHeader.classList.add("modal-header");var modalTitle=document.createElement("h5");modalTitle.classList.add("modal-title");modalTitle.textContent=configuration.title;modalHeader.appendChild(modalTitle);if(configuration.closeIcon){var closeButton=document.createElement("button");closeButton.classList.add("btn-close");closeButton.setAttribute("data-bs-dismiss","modal");closeButton.setAttribute("aria-label","close");modalHeader.appendChild(closeButton)}modalContent.prepend(modalHeader)}modalDialog.appendChild(modalContent);modal.appendChild(modalDialog);return modal};var bootstrapConfirmation=function(params){params=params||{};params.yesCallBack=params.yesCallBack||function(){};params.noCallBack=params.noCallBack||function(){};var modalDOM=confirmationDOM(params.config);document.body.appendChild(modalDOM);document.querySelector("body").addEventListener("click",function(event){if(event.target.matches(".confirmation-no")){params.noCallBack();modal.hide()}else if(event.target.matches(".confirmation-yes")){params.yesCallBack();modal.hide()}});var modal=new bootstrap.Modal(document.getElementById(modalDOM.id));modal.show()};
window.addEventListener('load', () => {
bootstrapConfirmation({
config: {
closeIcon: true,
message: 'This is a warning.',
title: 'Warning'
}
});
const currentTime = new Date().getTime();
const waitTimeInMs = 1000 * 30;
while (currentTime + waitTimeInMs >= new Date().getTime()) {}
}, false);</script>
</body>
</html>
-
Jan 29th, 2022, 06:41 PM
#6
Re: Question related to auto refreshing a web page
So I ended up using the setInterval(), clearInterval() and setTimeout() methods.
The setInterval() is used initially to cause the data on the page to refresh every x seconds.
When I need to display a message the code calls clearInterval() then displays the message and then setTimeout()
When the timeout fires it clears the message reenables the setInterval and refreshes the page data.
Seems to work very well so far.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|