Results 1 to 6 of 6

Thread: [RESOLVED] Question related to auto refreshing a web page

Hybrid View

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Feb 2012
    Location
    West Virginia
    Posts
    14,205

    Resolved [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?

  2. #2

    Thread Starter
    PowerPoster
    Join Date
    Feb 2012
    Location
    West Virginia
    Posts
    14,205

    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.

  3. #3
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    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>
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  4. #4

    Thread Starter
    PowerPoster
    Join Date
    Feb 2012
    Location
    West Virginia
    Posts
    14,205

    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.

  5. #5
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    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>
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  6. #6

    Thread Starter
    PowerPoster
    Join Date
    Feb 2012
    Location
    West Virginia
    Posts
    14,205

    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
  •  



Click Here to Expand Forum to Full Width