views:

123

answers:

1

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);
}
A: 

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/

Alex Nolan
Thanks for the quick reply! I tried modifying my function as per your suggestion (minus the extra =, and with parentheses in and quotes around "pop_init()", but I got the same result. I'm not sure how clearTimeout would work here, as timeout is not a handle to the original timer. Isn't that what clearTimeout expects to be passed? I've tried several similar approaches to clear the timer over the past couple days and nothing worked. For instance, I tried var timer = window.setTimeout("pop_init()", SESSION_TIME); followed by window.clearTimeout(timer); but that didn't change anything.
Mike
Yes, I seemed to have had a couple of mistakes in my code. I have fixed this mistakes and have verified that it now works with an example. I am not sure why you are having trouble clearing the timer though.
Alex Nolan
Okay, so I didn't format my function exactly like your's. I had:var timeout = false; function window.reportChildActivity() { if (timer !== false) { window.clearTimeout(timer); } SESSION_ALIVE = true; window.setTimeout(pop_init, SESSION_TIME); }I see the difference visually, but I don't know programatically the difference. With your changes it is working great! However, after I get the first popup to continue, and click the button to continue the parent window doesn't seem to sense child events.
Mike
Do I have to somehow re-bind the event handler in the child window? Or should I clear the timer in my pop_init function before resetting it? I'll post my pop_init function in case that may help or shed some light on my issue. THANKS for your help!
Mike