0

I have written the javascript to alert if there is no activity on the browser for 4 seconds. If there is no browser events, then a dialog box should appear asking to extend the session. If there is no events for 4 seconds, the notification should go away. If the user clicks the continue session then the counter should be reset and check for inactivity. The code is below. On page load, it is working correctly but once there is some activity, this script is not working. Where am I going wrong?

var countDownDate = dateAdd(new Date(), 4); var flag = false; var x = setInterval(function() { callFun(countDownDate); }, 1000); var contin = function() { flag = true; document.getElementById("dialogBox").style.display = "none"; document.getElementById("demo").style.display = "block"; } function dateAdd(date, units) { var ret = new Date(date); ret.setTime(ret.getTime() + units * 1000); return ret; } var callFun = function(countDownDate) { // Get todays date and time var now = new Date().getTime(); // Find the distance between now an the count down date var distance = countDownDate - now; var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s "; // If the count down is finished, write some text if (distance <= 0) { document.getElementById("demo").style.display = "none"; clearInterval(x); document.getElementById("dialogBox").style.display = "block"; } } $('*').on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function(x1) { countDownDate = dateAdd(new Date(), 4); flag = true; }); if (flag) { var z = setInterval(function() { alert('will logout now....'); document.getElementById("dialogBox").style.display = "none"; clearInterval(z); }, 8000); }
body { margin: 0px; padding: 0px; } #main { margin: 0px auto; padding: 0px; width: 900px; position: relative; } pre { background: #F8F8D2; padding: 10px; border: 2px solid #673E3E; border-radius: 3px; color: #222222; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="main"> <p id="demo"></p> <div id="dialogBox" style="display:none;"> <h3>Do you want to be logged in?</h3> <button value="Continue" onclick="contin();">Continue</button> <button value="Logout">Logout</button> </div> </div> </body>

Improve this question

3 Answers 3

Reset to default
1

Hope the below solution helps. When the dialog is displayed, I check for another 3 seconds for activity, if no activity, then I call logout function. Changes are made to contin, callFun and logout functions.

var countDownDate = dateAdd(new Date(), 4); var flag = false; var idleInterval, buttonInterval; var x = setInterval(function () {	callFun(countDownDate); }, 1000); var contin = function () {	flag = true;	document.getElementById("dialogBox").style.display = "none";	document.getElementById("demo").style.display = "block";	document.getElementById("demo").innerHTML = "0m 0s";	clearInterval(idleInterval);	buttonInterval = setInterval(function () {	callFun(countDownDate);	}, 1000); } function dateAdd(date, units) {	var ret = new Date(date);	ret.setTime(ret.getTime() + units * 1000);	return ret; } var callFun = function (countDownDate) {	// Get todays date and time	var now = new Date().getTime();	// Find the distance between now an the count down date	var distance = countDownDate - now;	var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));	var seconds = Math.floor((distance % (1000 * 60)) / 1000);	// Display the result in the element with id="demo"	document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";	clearInterval(idleInterval);	// If the count down is finished, write some text	if (distance <= 0) {	document.getElementById("demo").style.display = "none";	document.getElementById("dialogBox").style.display = "block";	clearInterval(x);	clearInterval(buttonInterval);	flag = false;	idleInterval = setInterval(logOut, 3000);	} } function logOut() {	if (!flag){	console.log("Log out");	document.getElementById("dialogBox").style.display = "none";	clearInterval(idleInterval);	} } $('*').on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function (x1) {	countDownDate = dateAdd(new Date(), 4);	flag = true; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style>	body {	margin: 0px;	padding: 0px;	}	#main {	margin: 0px auto;	padding: 0px;	width: 900px;	position: relative;	}	pre {	background: #F8F8D2;	padding: 10px;	border: 2px solid #673E3E;	border-radius: 3px;	color: #222222;	} </style> <div id="main">	<p id="demo"></p>	<div id="dialogBox" style="display:none;">	<h3>Do you want to be logged in?</h3>	<button value="Continue" onclick="contin();">Continue</button>	<button value="Logout">Logout</button>	</div> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This is partially working. what I also need is once the dialogBox is opened, if there is no activity, the dialog box should also be hidden and call a logout function. If there is any activity or the user clicks the continue, then the timer has to reset.
@zilcuanu Updated my solution above. Hope this works.
0

Seems like you need to call your "callFun" function again with a new date in your "contin" function.

Improve this answer

Comments

0

You forgot to restart the interval after having stopped it.

var countDownDate = dateAdd(new Date(), 4); var flag = false; var x = setInterval(function() { callFun(countDownDate); }, 1000); var contin = function() { flag = true; document.getElementById("dialogBox").style.display = "none"; document.getElementById("demo").style.display = "block"; countDownDate = dateAdd(new Date(), 4); var flag = false; var x = setInterval(function() { callFun(countDownDate); }, 1000); } function dateAdd(date, units) { var ret = new Date(date); ret.setTime(ret.getTime() + units * 1000); return ret; } var callFun = function(countDownDate) { // Get todays date and time var now = new Date().getTime(); // Find the distance between now an the count down date var distance = countDownDate - now; var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s "; // If the count down is finished, write some text if (distance <= 0) { document.getElementById("demo").style.display = "none"; clearInterval(x); document.getElementById("dialogBox").style.display = "block"; } } $('*').on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function(x1) { countDownDate = dateAdd(new Date(), 4); flag = true; }); if (flag) { var z = setInterval(function() { alert('will logout now....'); document.getElementById("dialogBox").style.display = "none"; clearInterval(z); }, 8000); }
body { margin: 0px; padding: 0px; } #main { margin: 0px auto; padding: 0px; width: 900px; position: relative; } pre { background: #F8F8D2; padding: 10px; border: 2px solid #673E3E; border-radius: 3px; color: #222222; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="main"> <p id="demo"></p> <div id="dialogBox" style="display:none;"> <h3>Do you want to be logged in?</h3> <button value="Continue" onclick="contin();">Continue</button> <button value="Logout">Logout</button> </div> </div> </body>

Improve this answer

1 Comment

This is working partially. What I also need is after showing the dialogBox, there should be another counter which will either hide the dialog Box and call the logout function if there is no event after displaying the dialog box and if there is any activity, then the dialogbox should be hidden and the counter should be reset.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.