Scenario is that I have written a function for auto refresh on form element and I want onclick event on login button to disable the auto refresh function.
I'm not able to get disable the autorefresh and the page still refreshes.
My code is:
$('#form').ready(function () { //Increment the idle time counter every minute.
var idleInterval = setInterval("timerIncrement()", 15000); // 1 minute
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e){
idleTime = 0;
});
});
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime > 2) { // 20 minutes
window.location.reload();
}
}
$('#login').ready(function () {
alert("working promptly");
//Zero the idle timer on mouse movement.
$(this).click(function (e) {
alert("Hi In click !");
$('#form').attr("disabled","true");
});
});
I guess you are needing to clear the interval timer:
$(this).click(function (e) {
alert("Hi In click !");
$('#form').attr("disabled","true");
clearInterval(idleInterval);
});
Related
I'm a complete newb to javascript, and much of this code was pulled from other sites. I'm trying to use two things I found to make a page redirect after the user is inactive for a specified amount of time.
I was able to get the timer working and make the page reload instead of redirecting, but my redirect code doesn't work for some reason.
EDIT: forgot to mention this code needs to work for specific pages, as I will be using one page to redirect to a specific page, and another to a different page.
jQuery(document).ready(function( $ ){
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 10000); // 10 seconds
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
});
function timerIncrement() {
idleTime = idleTime + 1;
if ((idleTime > 0) && (window.location.pathname == '/wp')) { // 10 seconds
window.location.href = "https://www.google.com";
}
}
});
I tried you code, it works, but wrong. If it don't work for you - remove that && (window.location.pathname == '/wp') and try again. You have bigger problem, your code just redirects after 10 seconds no matter what. You need to replace to something like that:
jQuery(document).ready(function( $ ){
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 1000); // 1 second
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
});
function timerIncrement() {
idleTime = idleTime + 1;
if ((idleTime > 9) && (window.location.pathname == '/wp')) { // 10 seconds
window.location.href = "https://www.google.com";
}
}
});
I have written some code that brings up a message for the user to either ignore the message or go to another page if they have been idle for more than a minute. Everything works, as I want it to except when the user ignores the message. Here is my code:
if ( valid ) {
var idleTime = 0;
jQuery(document).ready(function () {
var idleInterval = setInterval(timerIncrement, 60000);
});
function resetTimer() {
idleTime = 0;
}
jQuery(document)
.on('mousemove', resetTimer)
.on('keydown', resetTimer)
.on('scroll', resetTimer);
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime >= 1) {
jQuery('#popup').show();
}
jQuery(window).unbind();
}
jQuery('#popupClose').click(function() {
jQuery('#popup').hide();
});
}
I want the popup to not repopulate after they click #popupClose.
I'd do it like this. Just define a start time when you initialize your script. Let an interval run that checks how much time has passed. If it's more than your time wished show the dialog. if not hide it. Also reset the timer on your events.
Your javascript will look like this
$('#btclose').on('click', function(){
clearInterval(interv);
$('#popup').hide();
});
var start = new Date();
var interv = setInterval(function(){
var now = new Date();
console.log()
if(now-start > 5*1000){
$('#popup').show();
}
},10);
$('body').on('mousedown click mousemove', function(){
start = new Date();
});
Here's my fiddle
https://jsfiddle.net/c2L7wpn3/8/
Seems to work. Let me know if this helps
You can either store the information in a cookie, or with a flag (depending on whether you want the popup on each pageview or only once, period).
Then, check the flag/cookie before the showing of the popup. For example:
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime >= 1) {
if (jQuery('#popup').data('closed') == 1){
jQuery('#popup').show();
}
}
jQuery(window).unbind();
}
jQuery('#popupClose').click(function() {
jQuery('#popup').data('closed', 1);
jQuery('#popup').hide();
});
I am working on an application which requires to logout itself after certain amount of time, if user is not active on the page. I am using azure authentication token, and it expires in One hour. Now here I am trying to setup two timers, first timer will run every one min and will keep on resetting itself with every mouse action, and the 2nd timer should load after 58 mins of inactive, showing there are only 120 seconds remaining in the session. I am unable to get desired the functionality, the first timer runs after 1 min, but simultaneously it also kicks of the second timer.
Here's my Javascript code..
<script>
function timerModal() {
var count = 120;
console.log("This has started");
var counter = setInterval(timer, 1000); //1000 will run it every 1 second
function timer() {
count = count - 1;
if (count <= 0) {
$(this).mousemove(function (e) {
count = 120;
});
$(this).keypress(function (e) {
count = 120;
});
clearInterval(counter);
//vmsWebUtils.signOut(); //counter ended, do something here
return;
}
document.getElementById("timer").innerHTML = count + " "; // watch for spelling
console.log(count);
}
}
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 60000); // 1 minute
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
});
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime => 57) { // 57 minutes
$("#sessionTimeout").show();
timerModal();
}
console.log(idleTime);
}
</script>
I required the same effect for a site once, here is the code if it helps. (it's set to immediately show the prompt for testing purposes)
$('input').keypress(function(e) {
if (e.which == 13) {
$(this).next('input').focus();
e.preventDefault();
}
resetlogout();
});
$('textarea').keypress(function(e) {
resetlogout();
});
var autolog1 = setTimeout("logmeoutmsg()", 1);
var autolog = setTimeout("logmeout()", 10000);
function logmeout() {
window.location.href = "index.php?logout=1";
}
function logmeoutmsg() {
$("#logoutmsg").show();
var count=10;
var counter=setInterval(timer, 1000); //1000 will run it every 1 second
timer();
function timer()
{
$("#counterdown").html(count);
count=count-1;
if (count <= 0)
{
clearInterval(counter);
return;
}
}
}
function resetlogout() {
clearTimeout(autolog1);
clearTimeout(autolog);
autolog1 = setTimeout("logmeoutmsg()", 1);
autolog = setTimeout("logmeout()", 10000);
$("#logoutmsg").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logoutmsg" style="display:none;position:fixed;left:50%;top:100px;margin-left:-400px;border:1px solid #2e2e2e;width:800px;background:#eedbba;padding:10px 0px;">
<div style="width:760px;margin-left:20px;text-align:center;">
You will be logged out in <div style="display:inline-block;" id="counterdown"></div> seconds.<br><input style="color:#0000ff;cursor:pointer;" type="button" onclick="resetlogout();" value="Cancel">
<input style="color:#0000ff;cursor:pointer;" type="button" onclick="resetlogout();" value="Logout">
</div>
</div>
I fixed it my self with some modifications, here's the modified code !!
Works perfectly fine!!
<script>
var idleTime = 0;
var idleInterval = setInterval(timerIncrement, 60000); // 1 minute
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
function timerIncrement() {
idleTime = idleTime + 1;
console.log(idleTime);
if (idleTime > 2) { // 57 minutes
clearInterval(idleInterval);
timerModal();
console.log("hello");
}
console.log(idleTime);
}
function timerModal() {
var count = 120;
console.log("This has started");
var counter = setInterval(timer, 1000); //1000 will run it every 1 second
function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
vmsWebUtils.signOut(); //counter ended, do something here
return;
}
document.getElementById("timer").innerHTML = count + " "; // watch for spelling
console.log(count);
}
}
</script>
How can i fire a JQuery event when the user is gone on idle from the website for a specified time, and reset the timer on mouse move, scroll or on a key press.
This works by using a setTimeout function to fire at the end of the specified seconds. If basically anything happens during that time (the mouse moves, the page is scrolled, or a key is pressed) the timeout period is reset.
Set the idle period on the third line.
idleTimer = null;
idleState = false;
idleWait = 2000;
(function ($) {
$(document).ready(function () {
$('*').bind('mousemove keydown scroll', function () {
clearTimeout(idleTimer);
if (idleState == true) {
// Reactivated event
$("body").append("<p>Welcome Back.</p>");
}
idleState = false;
idleTimer = setTimeout(function () {
// Idle Event
$("body").append("<p>You've been idle for " + idleWait/1000 + " seconds.</p>");
idleState = true; }, idleWait);
});
$("body").trigger("mousemove");
});
}) (jQuery)
Here is a simple script using JQuery that handles mousemove and keypress events. If the time expires, the spinner-wrap event is fired.
<script type="text/javascript">
var idle = 0;
$(document).ready(function () {
//Increment the idle time counter every seconds.
var idleInterval = setInterval(timerIncrement, 1000); // 1 seconds
//Zero the idle timer on mouse move.
$(this).mousemove(function (e) {
idle = 0;
});
// zero the idle timer on keypress
$(this).keypress(function (e) {
idle = 0;
});
});
function timerIncrement() {
idle = idle + 1;
if (idle > 5) { // 5 seconds
$('.spinner-wrap').trigger('click');
}
}
</script>
I am opening a fancybox for session time out of a logged in user after some waiting period the popup is disabling and the user is logged out automatically, but if I clicking outside of the popup the counter time sets 0 so it is not logged out.
window.idleTime = 0;
jQuery(document).ready(function() {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 60000);
//Zero the idle timer on mouse movement.
jQuery(this).mousemove(function (e) {
idleTime = 0;
//alert(idleTime);
});
jQuery(this).keypress(function (e) {
idleTime = 0;
//alert(idleTime);
});
jQuery(".classname").live("click", function(){
//alert('');
idleTime = 0;
})
});
function timerIncrement() {
var timedouturl = "logout.php?sTimeOut=1";
//alert('Calling..');
idleTime = idleTime + 1;
if (idleTime > 2) { // 1 minutes
//alert('Time Out =>'+idleTime);
//window.location.reload();
jQuery.fancybox({
'type' : 'ajax',
'href' : 'popup.php',
'autoSize' : false,
'width' : 450,
'height' : 'auto',
afterLoad : function(){
//alert("IdleTime :"+idleTime);
setTimeout( function() {
jQuery.fancybox.close();
//alert("LastIdleTime :"+ window.idleTime);
if (window.idleTime > 2){
window.location.href = timedouturl;
}
},60000);
}
});
}
}
I want to prevent every js event when popup opened outside of the popup. any idea ?
here
jQuery(".classname").live("click", function(){
//alert('');
idleTime = 0;
})
is for when clicking ok button on the fancybox.
You could use a boolean that keeps track of when your popup is open, then only reset timeout when popup isn't open:
window.idleTime = 0;
var timeoutPopupOpen = false;
jQuery(document).ready(function() {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 60000);
//Zero the idle timer on mouse movement.
jQuery(this).mousemove(function (e) {
if (!timeoutPopupOpen) {
idleTime = 0;
}
//alert(idleTime);
});
jQuery(this).keypress(function (e) {
if (!timeoutPopupOpen) {
idleTime = 0;
}
//alert(idleTime);
});
jQuery(".classname").live("click", function(){
if (!timeoutPopupOpen) {
idleTime = 0;
}
//alert('');
})
});
function timerIncrement() {
var timedouturl = "logout.php?sTimeOut=1";
//alert('Calling..');
idleTime = idleTime + 1;
if (idleTime > 2) { // 1 minutes
//alert('Time Out =>'+idleTime);
//window.location.reload();
timeoutPopupOpen = true
jQuery.fancybox({
'type' : 'ajax',
'href' : 'popup.php',
'autoSize' : false,
'width' : 450,
'height' : 'auto',
afterClose : function(){
timeoutPopupOpen = false;
},
afterLoad : function(){
//alert("IdleTime :"+idleTime);
setTimeout( function() {
jQuery.fancybox.close();
//alert("LastIdleTime :"+ window.idleTime);
if (window.idleTime > 2){
window.location.href = timedouturl;
}
},60000);
}
});
}
}
I'm not sure which Fancybox you are using because I can't seem to find the afterLoad option in the fb2docs or these docs from fancybox.net, but besically just keep track of when someone starts and closes fancybox so you know if you should be cancelling the timeout.