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

Popular posts from this blog

Contact us Forms Links

Hi Friends This is my second post to blogger.com. and this time I am going to share my few useful resource links with you all. This post is regarding to “How to create contact us form to the html page” So please go to the following sites 1) http://wufoo.com/gallery/templates/forms/contact-form/ Thats it
Post a Comment
Read more
Hello Friends This is an important moment for me! This is the first blog I’ve ever written. It’s something I’ve wanted to do for a long time, but wasn’t sure how to do it, where, when, or even if. And finally, now here I am. People say that blogs are like a diary (do I hide it under my bed, lock it with a key? Tell it all my secrets? It seems like a wonderful place to share my thoughts with you, or what I do.) It’s going to be fun sharing my thoughts with you, outside the context of a book. Ok let me tell you about myself. I am a I.T Engineer and having 2 year experience about the I.T Sector. After Completion of my graduation i worked as a "Web Designer" for 1.3 years then i Switch my profile to software engineer and I am working as a Software engineer from 6 months. so basically my blogs are all bout to the new technologies, interesting and important codes and some useful resources. For more about myself please visit my website: http://www.lokeshchadha.co.cc/ . 1)..Downl...
Post a Comment
Read more

Three Tier Architecture in asp.net using c#

3-Tier Architecture in asp.net using c# In this asp.net tutorial you will learn how to implement 3-tier architecture in asp.net using c#. 3-Tier architecture is also called layered architecture. Some people called it n-tier architecture. Layer architectures are essentially objects and work in object oriented environment just like asp.net. 3-tier architecture is a very well known architecture in the world of software development, it doesn't matter whether you are developing web based application or desktop based, it is the best architecture to use. 3-Tier Architecture in asp.net using c# 3-Tier architecture consists of 1) UI or Presentation Layer 2) Business Access Layer or Business Logic Layer 3) Data Access Layer Presentation Layer Presentation layer consists of pages like .aspx or desktop based form where data is presented to users or getting input from users. Business Logic layer or Business Access Layer Business logic layer contains all of the business logic. Its r...
Post a Comment
Read more