Question

I’ve got a Jquery function that I wrote which blacks out the screen after a certain amount of inactivity, creates a pop-up that allows the user to click a button to stay logged in, and logs them out (closing the application window) if they do not respond in time.

The environment is ASP.NET (VB). We don’t technically use master pages, but we do have a parent page in which our header, footer and nav reside, and my Jquery code is called from that window, loaded via an IFrame.

My problem is that if one is working in a child window, the parent window doesn’t recognize that the system is in use, and will automatically engage at the allocated time.

I’ve tried everything under the sun I can think of and nothing works properly. My event handler is working, and it does call the parent window function, but the timer is not being reset.

I have this function in the parent window:

<script language="javascript" type="text/javascript">  
function window.reportChildActivity() { 
    SESSION_ALIVE = true; 
    window.setTimeout("pop_init()", SESSION_TIME); 
    } 
</script> 

And this in the child window:

<script type="text/javascript">  
$(document).bind("mousedown keydown blur", function() { 
    window.parent.reportChildActivity(); }); 
</script> 

No matter how much I click or use keys in the child window, my Jquery timeout code is called when SESSION_TIME runs out the first time. And then I get multiple Jquery windows in my page telling me to click to continue. It’s like the events are being buffered and when they fire these windows are all being spawned multiple times. Does anyone see from this what I’m doing wrong? Thanks!

—- EDIT —–
I’m adding my pop_init function and supporting functions for reference:

// remove all added objects and restart timer
function popup_remove() {
    $("#popup_window").fadeOut("fast", function() { $('#popup_window,#popup_overlay').trigger("unload").unbind().remove(); });
    //if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
    $("body", "html").css({ height: "auto", width: "auto" });
    $("html").css("overflow", "");
    //}
    window.setTimeout(pop_init, SESSION_TIME);
}

// session ajax call from button click
function session_refresh() {
    SESSION_ALIVE = true;
    $(".buttons").hide();
    $("#popup_message").html("<center><br />Thank you!  You may now resume using the application.<br /></center>");
    window.setTimeout(popup_remove, 1000);
    $("#popup_window").fadeOut("slow", function() { $('#popup_window,#popup_overlay').trigger("unload").unbind().remove(); });
    window.setTimeout(pop_init, SESSION_TIME);
}

function popup_expired() {
    if (!SESSION_ALIVE)
        window.close();
}

// Main popup window handler
function pop_init() {
    // show modal div
    $("html").css("overflow", "hidden");
    $("body").append("<div id='popup_overlay'></div><div id='popup_window'></div>");
    //$("#popup_overlay").click(popup_remove);  // removed to make sure user clicks button to continue session.
    $("#popup_overlay").addClass("popup_overlayBG");
    $("#popup_overlay").fadeIn("slow");

    // build warning box
    $("#popup_window").append("<h1>Warning</h1>");
    $("#popup_window").append("<p id='popup_message'>Your session is about to expire.  Please click the button below to continue working without losing your session.</p>");
    $("#popup_window").append("<div class='buttons'><center><button id='continue' class='positive' type='submit'><img src='images/green-checkmark.png' alt=''/> Continue Working</button></center></div>");

    // attach action to button
    $("#continue").click(session_refresh);

    // display warning window
    popup_position(400, 300);
    $("#popup_window").css({ display: "block" }); //for safari using css instead of show
    $("#continue").focus();
    $("#continue").blur();

    // set pop-up timeout
    SESSION_ALIVE = false;
    window.setTimeout(popup_expired, 30000);
}

Answer 1

try assigning the setTimeout to a global variable and clearing it each time eg:

var timer=false;
window.reportChildActivity = function() {
    if(timer!==false) {
        clearTimeout(timer);
    }
    SESSION_ALIVE = true; 
    timer=window.setTimeout(pop_init, SESSION_TIME); 
}

example: http://jsfiddle.net/pB2hX/1/