jQuery session timeout countdown with jQueryUI dialog

Very nice jQuery session timeout countdown example with the use of the jQuery idleTimer plugin.

Here’s my example with the jQueryUI dialog as the warning.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

var idleTime = 2000; // number of miliseconds until the user is considered idle var initialSessionTimeoutMessage = 'Your session will expire in <span id="sessionTimeoutCountdown"></span> seconds.<br /><br />Click on <b>OK</b> to continue your session.'; var sessionTimeoutCountdownId = 'sessionTimeoutCountdown'; var redirectAfter = 10; // number of seconds to wait before redirecting the user var redirectTo = ' http://regretless.com/2010/02/14/jquery-session-timeout-countdown/'; // URL to relocate the user to once they have timed out var keepAliveURL = 'keepAlive.php'; // URL to call to keep the session alive var expiredMessage = 'Your session has expired.  You are being logged out for security reasons.'; // message to show user when the countdown reaches 0 var running = false; // var to check if the countdown is running var timer; // reference to the setInterval timer so it can be stopped $(document).ready(function() {     // create the warning window and set autoOpen to false     var sessionTimeoutWarningDialog = $("#sessionTimeoutWarning");     $(sessionTimeoutWarningDialog).html(initialSessionTimeoutMessage);     $(sessionTimeoutWarningDialog).dialog({         title: 'Session Expiration Warning',         autoOpen: false,    // set this to false so we can manually open it         closeOnEscape: false,         draggable: false,         width: 460,         minHeight: 50,         modal: true,         beforeclose: function() { // bind to beforeclose so if the user clicks on the "X" or escape to close the dialog, it will work too             // stop the timer             clearInterval(timer);               // stop countdown             running = false;               // ajax call to keep the server-side session alive             $.ajax({               url: keepAliveURL,               async: false             });         },         buttons: {             OK: function() {                 // close dialog                 $(this).dialog('close');             }         },         resizable: false,         open: function() {             // scrollbar fix for IE             $('body').css('overflow','hidden');         },         close: function() {             // reset overflow             $('body').css('overflow','auto');         }     }); // end of dialog         // start the idle timer     $.idleTimer(idleTime);       // bind to idleTimer's idle.idleTimer event     $(document).bind("idle.idleTimer", function(){         // if the user is idle and a countdown isn't already running         if($.data(document,'idleTimer') === 'idle' &amp;&amp; !running){             var counter = redirectAfter;             running = true;               // intialisze timer             $('#'+sessionTimeoutCountdownId).html(redirectAfter);             // open dialog             $(sessionTimeoutWarningDialog).dialog('open');               // create a timer that runs every second             timer = setInterval(function(){                 counter -= 1;                   // if the counter is 0, redirect the user                 if(counter === 0) {                     $(sessionTimeoutWarningDialog).html(expiredMessage);                     $(sessionTimeoutWarningDialog).dialog('disable');                     window.location = redirectTo;                 } else {                     $('#'+sessionTimeoutCountdownId).html(counter);                 };             }, 1000);         };     });   });

Here’s my example with the jQueryUI dialog as the warning.

source : http://pure-essence.net/2010/02/14/jquery-session-timeout-countdown/