locked
Sync progress bar between multiple open tabs RRS feed

  • Question

  • User325035487 posted

    I am using javascript to show a countdown progress bar to session timeout which logs out the user as well. Is there a way to sync the data between multiple open tabs. Now each tab has its own count down. Basically what I want is the timeleft variable in the JS below to sync between all open tabs including new ones which are opened. I know we can use a Session Variable to do that. But how can I achieve that without extra server load.

    JS

    var timoutWarning = 1140000; // Displa
    var logoutUrl = '/logout'; //
    var warningTimer;
    var timeoutTimer;
    var progressTimer;
    var timeleft = 1200;
    var timetotal = 1200;
    var running = false;
    var loc = window.location.pathname;
    var arr = loc.split('/');
    var pathName = arr[1];
    // Start timers.
    function StartTimers() {
        warningTimer = setTimeout("IdleWarning()", timoutWarning);
        progress(timeleft, timetotal, $('#progressBar'));
    }
    // Reset timers.
    function ResetTimers() {
        clearTimeout(warningTimer);
        clearTimeout(progressTimer);
        StartTimers();
        document.getElementById("timeouts").style.display = "none";
    }
    // Show idl
    function IdleWarning() {
        document.getElementById("timeouts").style.display = "block";
    }
    // Logout the user.
    function IdleTimeout() {
        window.location = logoutUrl;
    }
    function progress(timeleft, timetotal, $element) {
        running = true;
        var progressBarWidth = timeleft * $element.width() / timetotal;
        $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html((timeleft / 60).toFixed(1) + " m");
        if (timeleft > 0) {
            progressTimer = setTimeout(function () { progress(timeleft - 1, timetotal, $element); }, 1000);
        }
        else {
            IdleTimeout();
        }
    };
    if (pathName == 'Home' && running == false) {
        ResetTimers();
    }

    CSS

            #timeouts {
                display: none;
                margin-bottom: 10px;
            }
    
            #progressBar {
                width: 100%;
                margin: 7px auto;
                height: 14px;
                background-color: #EEE;
            }
    
                #progressBar div {
                    height: 100%;
                    text-align: right;
                    padding: 0 1px;
                    line-height: 14px; /* same as #progressBar height if we want text middle aligned */
                    width: 0;
                    color: #ffffff;
                    background-color: #F52151;
                    box-sizing: border-box;
                }

    HTML for Progress bar

    <div id="progressBar"><div></div></div>

    HTML for the timeout warning message

    <div id="timeouts" class="col-sm-12">
        <h2>
            Session About To Timeout
        </h2>
        <span class="alert-danger">You will be automatically logged out in 1 minute. To remain logged click anywhere in this window.</span>
    </div>

    Saturday, December 12, 2015 6:12 AM

Answers

All replies

  • User-166373564 posted

    HI Jkjhse,

    You could use ajax to achieve that without extra server load.

    $.ajax({   

                       type: "POST",   

                       url: "Default.aspx/GetText",   

                       data: "{}",   

                       contentType: "application/json; charset=utf-8",   

                       dataType: "json",   

                       async: true,   

                       success: function (msg) {   

                       }   

                   });    

    [System.Web.Services.WebMethod]           

           public static string GetText()   

           {        

               return "...";   

           } 

    More information,please refer to 

    jQuery Progress Bar in ASP.Net

    http://www.c-sharpcorner.com/UploadFile/8b7513/jquery-progress-bar-in-Asp-Net/

    Best regards,

    Angie

    Tuesday, December 15, 2015 1:34 AM
  • User325035487 posted

    Thank you for reply. Sorry for being more clear. I am not using Jquery Ui. As I am getting errors with that. So i am using jQuery autocomplete.

    That is an amazing library and very easy to use. my progress bar is working fine. My question was how to sync a variable used by the script between various open tabs. Currently each tab has its own count down to zero. When it reaches zero the script calls a logout page. The issue I am facing is if the user has multiple tabs open and forget to check any tab for 20 minutes, he will be logged out despite being active in another tab. There is a risk of losing his/her data this way.

    var timeleft = 1200;

    That is the variable i want to sync between all open tabs.

        if (timeleft > 0) {
            progressTimer = setTimeout(function () { progress(timeleft - 1, timetotal, $element); }, 1000);
        }

    As you can see that part of the script reduced the timeleft by a second every second. I dont want the browser to hang also. My timeout is 20 minutes. So I dont mind if this values sync between open tabs every one minute.

    Tuesday, December 15, 2015 5:49 AM
  • User-166373564 posted

    Hi jkjhse,

    If you want to sync variable between all open tabs,you can use Local Storage.

    With localStorage,all pages can store and access the same data.

    More information:

    LocalStorage

    https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage

    HTML5 Local Storage

    http://www.w3schools.com/html/html5_webstorage.asp

    Introducing HTML5 Storage

    http://diveintohtml5.info/storage.html

    Note: Some hyperlinks are third party, they are just reference for you, you can also search relevant topic in Bing.

    Best regards,

    Angie

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 17, 2015 3:01 AM