Reputation: 417
I'm new to Jquery, but I'm using it in a .NET 2.0 project to time our users out of the system after 13 minutes of inactivity. I've got a function that basically blacks out the screen and gives them a button ton continue working. It's been working for awhile, but only works inside of "child" windows because of the way I implemented it.
We're not using Master Pages technically, but I am trying to embed the code in what is our equivalent of a master page, and I'm running into a javascript error. The code in question is:
$(window).load() {
window.setTimeout("pop_init()", SESSION_TIME);
}
The error I'm getting is that a ";" is expected. I've tried:
$(window).load() {
window.setTimeout("pop_init()", SESSION_TIME);
};
and also tried:
$(window).load(function() {
window.setTimeout("pop_init()", SESSION_TIME);
});
all with the same result. Thanks in advance for your time and any possible suggestions!
Here is the code for my pop_init function:
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()", 1000);
}
Well, I've made sure that all dependent functions are located above the code that calls them now, and I'm still getting the same error, so I'm at a loss. The odd thing is that my overlay fades in, and then the error is thrown - but my popup with the continue button never shows. So it's almost as if the error is between the overlay and the #popup_window construction. I'm attaching my complete .js file. There are some other functions in it that aren't concerned with this, but are for another part of the system, but I'm including them for completeness and the chance that perhaps there is interference of some sort:
// Following code is to handle session timeout // Global variable used to set repeated session timeout calls. // Set SESSION_TIME to (# seconds) * 1000 for the total milliseconds // to wait before sending the popup windows to the user. // You should give the user two minutes before the session times out to respond, // e.g. for a 15 minute timeout, set it to 13 * 60 * 1000 = 780000 (~ 13 minutes). var SESSION_TIME = 60000;
// Global variable used to test if the session has expired. Set to true until popup // is shown to the user. Reset when they click Continue. var SESSION_ALIVE = true;
// determine size of popup window and adjust position function popup_position(P_WIDTH, P_HEIGHT) { $("#popup_window").css({ marginLeft: '-' + parseInt((P_WIDTH / 2), 10) + 'px', width: P_WIDTH + 'px' }); }
// 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("
Thank you! You may now resume using the system.
");
window.setTimeout("popup_remove()", 300);
$("#popup_window").fadeOut("slow", function() { $('#popup_window,#popup_overlay').trigger("unload").unbind().remove(); });
window.setTimeout("pop_init()", SESSION_TIME);
}
// Main popup window handler function pop_init() { // show modal div $("html").css("overflow", "hidden"); $("body").append(""); //$("#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()", 1000);
}
// First call to popup window $(window).load(function() { window.setTimeout("pop_init()", SESSION_TIME); });
function popup_expired() { if (!SESSION_ALIVE) //window.location.href = "login.asp"; //window.location.href = "default.aspx"; window.close; }
function replaceBadCharacters() { // Get all textboxes and text area controls $('input[type=text], textarea').each(function() { var txtobj = $('#' + this.id); txtobj.attr("value", txtobj.attr("value").replace(new RegExp(String.fromCharCode(8216), "g"), String.fromCharCode(39))); // Microsoft Word left-side apostrophe txtobj.attr("value", txtobj.attr("value").replace(new RegExp(String.fromCharCode(8217), "g"), String.fromCharCode(39))); // Microsoft Word right-side apostrophe txtobj.attr("value", txtobj.attr("value").replace(new RegExp(String.fromCharCode(8220), "g"), "'")); // Microsoft Word left-side quotes txtobj.attr("value", txtobj.attr("value").replace(new RegExp(String.fromCharCode(8221), "g"), "'")); // Microsoft Word right-side quotes }); } // End of timeout code //-------------------------------------------
// Following code is to warn users on Case Entry/Edit page that case will be saved if they click certain links // (like to add Notes, change Collection Tables, etc.) var calling_obj;
// call from cancel button click
function save_abort() {
popup_remove();
}
// call from continue button click
function save_continue() {
//alert(calling_obj.id);
__doPostBack(calling_obj.id, '');
popup_remove();
}
function warn_save(obj) {
// show modal div
//alert(obj.id);
$("html").css("overflow", "hidden");
$("body").append("<div id='popup_overlay'></div><div id='popup_window'></div>");
$("#popup_overlay").addClass("popup_overlayBG");
$("#popup_overlay").fadeIn("slow");
// build warning box
$("#popup_window").append("<h1>Save Case?</h1>");
$("#popup_window").append("<p id='popup_message'><center>Navigating away from the current page will automatically save this Case. Do you want to continue?</center></p>");
$("#popup_window").append("<div class='buttons'><center><button id='continue' class='positive' type='submit'><img src='images/green-checkmark.png' alt=''/>Yes</button> <button id='cancel' class='positive' type='submit' alt=''><img src='images/delete.png' alt=''/>No</button></center></div>");
// attach action to button
$("#continue").click(save_continue);
calling_obj = obj;
$("#cancel").click(save_abort);
// display warning window
popup_position(400,300);
$("#popup_window").css({display: "block"}); //for safari using css instead of show
$("#continue").focus();
$("#continue").blur();
}
// Case Entry div expand/close functions
function close_div_acct() {
$("#div_acct").hide();
}
Upvotes: 0
Views: 2026
Reputation: 417
Well, after completely de-constructing my page until I had no errors, and then re-constructing it until I came upon the error, it turned out that we were calling the Utility.RegisterTypeForAjax method, which apparently requires AjaxPro.2 and we were using the older version of AjaxPro. I upgraded to AjaxPro.2 and got around the error.
Now I've got a new issue, though. My timeout code (pop_init) is being called every SESSION_TIME seconds/minutes, regardless of the child window being used. My timeout code is being called from what is our version of a master page (but is not technically a master page) and the parent window doesn't seem to recognize that the child window is still in use. Any ideas for this one?
Thanks for all the great, detailed help from Bryan, meder and Nick!
Upvotes: 1
Reputation: 584
Putting setTimeout in window.load is redundant, as window.setTimeout will be run on window.load. You shouldn't need anything more than this:
window.setTimeout("pop_init()",SESSION_TIME); //Added quotes so function isn't immediately run
Make sure SESSION_TIME and pop_init() are declared in the proper order. If you're having any issues, it is most likely in your SESSION_TIME or pop_init() functions.
EDIT: Make sure your session_time is in the correct order of magnitude, SESSION_TIME = 3000 is a timeout of 3 seconds.
Upvotes: 0
Reputation: 630627
It should look like this:
$(window).load(function() {
window.setTimeout(pop_init, SESSION_TIME);
});
Though your last attempt should work or throw a different error. It looks like the last statement before this one (possibly in an included file) isn't property terminated with a ;
. Look through your code and look at the last JavaScript that runs before this, including files included via a <script>
tag. To test the theory, do this:
;$(window).load(function() {
window.setTimeout(pop_init, SESSION_TIME);
});
Upvotes: 0
Reputation: 186762
Have you tried..
$(window).load(function() {
setTimeout( pop_init, SESSION_TIME );
});
This doesn't invoke it automatically. Syntactically it's correct though. If that doesn't do it, the problem may lie elsewhere, possibly above this snippet of code.
Upvotes: 1