geeky · non php code

jQuery session timeout countdown with jQueryUI dialog

Dodo

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.

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.

21 thoughts on “jQuery session timeout countdown with jQueryUI dialog”

  2. Thanks, nice work! Between your work and the guy that created the idleTimer you thought through some things that would have bitten me by writing this myself.

    Reply

  3. Hi,

    What should be done if i have Iframe openened in page. Any action in iframe, doesn’t impact your idleTime. If i use this in iframe; it will open jquery winodw inside.

    How do we use where we have multiple iframes.

    Reply

  4. Have you figured out why the warning dialog is called immediately after closing a javascript alert in Chrome? That little issue makes this plugin unusable which is a real bummer because it’s great otherwise.

    Reply

  5. love this, but I have a few questions questions….

    1) what type of code in the keepalive.php file will reset the session? just setting sessions_start(); again ? and this will restore the session for another default of 1440(24 min.) as set in the .ini file?

    2) does this script actually check to see if the session has expired? it seems as though we are just giving it a time limit to expire in and not really calculating from the time the actual session began. am I right here?

    thanks
    brando

    Reply

  7. If you are on some other browser tab/instance it does not bring the focus back to message box. Is there a way we can acheive this?

    Thanks,
    VK

    Reply

  8. How can i achieve this functionality

    When session expired i don’t want to see the page after Login directly when i copy paste the URL in the browser. Means when i get an alert and returned back to the main page unless and until i logged in again i don’t want to access the second page how can i achieve this.

    Reply

    1. There is no code in there. It’s just a url you call to keep your session alive. Whatever it is for your application. It’s only an example.

      Reply

  11. I have two buttons on my page one is logoff and another is keep session alive it’s working fine for aspx page but it’s not working for popup window, with popup window if i click on keep session alive then after it’s logging off.Does anyboday has idea about this? I am using jquery fancy box as popup window.

    Reply

Leave a comment