Skip to main content

Alert user before session expires, option to renew session


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> jQueryUI dialog session timeout countdown DEMO </TITLE>

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8rc1.custom.min.js"></script>

<!-- include smoothness jQueryUI theme -->

<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8rc1.custom.css">

<!-- jQuery idletimer plugin http://paulirish.com/2009/jquery-idletimer-plugin/ -->

<script type="text/javascript" src="js/jquery.idletimer.js"></script>

<style type="text/css">

 body {

 font-family:Arial,Geneva,Verdana,sans-serif;

 font-size: 0.8em;

 }

</style>

<script type="text/javascript">

 var idleTime = 2000; // number of miliseconds until the user is considered idle

 var initialSessionTimeoutMessage = 'Your session will expire in <span id="sessionTimeoutCountdown"></span>&nbsp;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://pure-essence.net/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' && !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);

 };

 });



 });

</script>

</HEAD>



<BODY>

<h1>jQuery session timeout countdown with warning dialog</h1>

<p>

 This idle timeout countdown is triggered after 2 seconds. Keep your mouse and keyboard still!

<br /><br />

<a href="http://pure-essence.net/2010/02/14/jquery-session-timeout-countdown/">Return to Blog Post</a>

</p>

<div id="sessionTimeoutWarning" style="display: none"></div>

</BODY>

</HTML>


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

Comments

Post a Comment