I have wriiten jquery and html css as below lines of codes
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
resetTimer();
document.onkeypress = resetTimer;
document.onmouseover = resetTimer;
function logout() {
var t1 = setTimeout(reallyLogout, 60000);
$(".popup-form").css("display", "block");
}
var t;
function resetTimer() {
clearTimeout(t);
t = setTimeout(logout, 60000); // Logout in 10 minutes
}
function reallyLogout() {
debugger
$(".popup-form").css("display", "none");
location.href = '../login/login.aspx';
}
function cancel() {
clearTimeout(t1);
resetTimer();
$(".popup-form").css("display", "none");
}
});
</script>
<style type="text/css">
.popup-form {
display:inline-block;
padding:40px;
background-color:white;
border:1px solid black;
position:fixed;
left:40%;
top:35%;
display:none;
z-index:99999999999999999;
}
</style>
<body>
<div class="popup-form">
<div class="popup-inner-form">
<h4>Confirm</h4>
You will be logged out after 60 seconds
<input id="okbtn" value="Ok" type="submit" onclick="return reallyLogout();" />
<input id="cancelbtn" value="Cancel" type="submit" onclick="return cancel();" />
</div>
</div>
</body>
I have created customized form ... which is displayed when user will be idle for 60 seconds. Actually our main purpose is that after 60 seconds when the popup is displayed. If user will not press any any button (ok/cancel), it should be redirected to login page. Now the issue is that when popup is displayed and ok button is clicked, it doesnot redirect it to login page... Please help me in sorting out the issue in the code!!!
First of all, since you are using instantly executed function, you shall pass jQuery as parameter in order for it to be active at the function scope.
(function ($) { --> })(jQuery);
You shall attach the events onclick from within the instant function scope in order to access functions as reallyLogout since you do not have access to the functions outside the instant function call scope because it is only executed once within this scope..
t1 shall be declared in the global scope of the function so that you can reset it from anywhere within any nested function call var t1;
Here is a working example.. I have made the time 4 seconds
(function ($) {
resetTimer();
var t1; // set this in global scope
document.onkeypress = resetTimer;
document.onmouseover = resetTimer;
function logout() {
t1 = setTimeout(reallyLogout, 4000);
$(".popup-form").css("display", "block");
}
var t;
function resetTimer() {
clearTimeout(t);
t = setTimeout(logout, 4000); // Logout in 10 minutes
}
function reallyLogout() {
// debugger
console.log($(".popup-form"));
$(".popup-form").css("display", "none");
location.href = '../login/login.aspx';
}
function cancel() {
clearTimeout(t1);
resetTimer();
$(".popup-form").css("display", "none");
}
$("#okbtn").click(function(){reallyLogout();});
$("#cancelbtn").click(function(){cancel();});
})(jQuery); .popup-form {
display:inline-block;
padding:10px;
background-color:white;
border:1px solid black;
position:fixed;
left:10%;
top:35%;
display:none;
z-index:99999999999999999;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="popup-form">
<div class="popup-inner-form">
<h4>Confirm</h4>
You will be logged out after 60 seconds
<input id="okbtn" value="Ok" type="submit" />
<input id="cancelbtn" value="Cancel" type="submit" />
</div>
</div>
</body>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments