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>
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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.
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.
Note: Some hyperlinks are third party, they are just reference for you, you can also search relevant topic in Bing.
Best regards,
Angie
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
529 Points
261 Posts
Sync progress bar between multiple open tabs
Dec 12, 2015 06:12 AM|jkjhse|LINK
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
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>All-Star
32817 Points
3815 Posts
Re: Sync progress bar between multiple open tabs
Dec 15, 2015 01:34 AM|Angie xu - MSFT|LINK
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
529 Points
261 Posts
Re: Sync progress bar between multiple open tabs
Dec 15, 2015 05:49 AM|jkjhse|LINK
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.
All-Star
32817 Points
3815 Posts
Re: Sync progress bar between multiple open tabs
Dec 17, 2015 03:01 AM|Angie xu - MSFT|LINK
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.