Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

CJ Session Timer 3.1

A jQuery Session Time-Out Timer and Session Extender

CJ Session Timeout Session Monster

Let's set up a problem I like to call the ColdFusion 30 Minute Session Limit monster. You have a secure back-end management page. It allows your client to edit a portion of their website content. One of the edit fields is using tinyMCE so the client can change an entire page worth of content. They start banging away at the keyboard, typing out what is sure to be the greatest webpage in the history of the internet. They take a phone call, talk for a bit and then jump right back to typing. It's truly awe inspiring. They finish and go down to click "submit". The form posts the data and BAM! Sorry, the session timed-out. Silly client, didn't you know you are on a shared ColdFusion hosting plan and the ISP has only given you a maximum of 30 minutes to do all your work!

No longer are you going to be bound to the maximum session time set by your ISP...

Yeah, admit it, we've all been there. I'm sure you took care of the problem by either telling them to type it in DreamWeaver first and then copy and paste it into the field, or maybe you're super talented and created some sort of time consuming coding trick to save the data for them. Either way, it's a pain in the ass. Well, no more. Again, I have worked countless hours in my secret underground programming lab and have come up with a solution that is sure to win me a Nobel prize. Maybe even a date with Jennifer Aniston. No longer are you going to be bound to the maximum session time set by your ISP, this plug-in gets around that limitation! Yeah, its that cool. OK, maybe not that cool.

Its New And Improved, Yo!

Let me introduce you to the new CJ Session Timeout jQuery Plug-In. The first incarnation of this plug-in was just a simple little countdown timer that, once it hit zero, would redirect the browser to a user supplied page. It really didn't address the 30 Minute Session Limit problem. It knew it was there, lurking in the darkness, waiting to jump out and rip the guts out of my clients hard days work, but it did nothing to protect them. It would just send them scurrying away right before the monster was about to attack. Well, no more.

After doing a few test. I realized, that a session timer, at least where ColdFusion is concerned, will reset on any .cfm page load. A few months ago I devised a quick little hack on one of my clients sites. It included an iframe and which would reload a simple little .cfm file every ten minutes. It was so simple and it worked liked a charm. The only downside, I didn't have time to clean it up and put it into a jQuery package for all my loyal cjboco.com readers. That is, until this week.

The How's

To get things working, you first need to download the script. I've tested this fairly thoroughly with jQuery 1.4.4 (I think there were some problems with 1.4.3) and all the usual browsers. Once downloaded, you need to include it in your page (the plug-in needs to load after jQuery) and then you need to initialize it. Below is an example how to do this:

The HTML

You need to place a container somewhere in your HTML to hold the countdown timer display. You can style this anyway you want, since the plug-in doesn't handle any of this. It will just place a timecode in the container that looks like 1:02:26. For the test, I'm just using:

<div id="sessionTest"></div>
The JS

Lately, I've been declaring all of my scripts on the bottom of the page. If you choose to declare it in the header, then you may need to add a $(document).ready() call to ensure that all the DOM has loaded before the script runs. Here's what I've used for the bottom:

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.cj.session_timeout.js"></script>
<script type="text/javascript">
$(function() {
   $('#sessionTest').cjSessionTimeout({
      timeInterval: 120,               // time in minutes for the redirect
      redirectUrl: 'timeout.html',     // after the timer is done, go here...
      keepAlive: true,                 // yes, we want to keep session alive
      loaderInterval: 10,              // time in minutes for the iframe reload
      loaderUrl: 'session_loader.cfm' // the page to load to keep session alive
   });
});
</script>

If you want to have the timer with a redirect and not bother with keeping the session alive, then you might do something like this:

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.cj.session_timeout.js"></script>
<script type="text/javascript">
$(function() {
   $('#sessionTest').cjSessionTimeout({
      timeInterval: 30,               // time in minutes for the redirect
      redirectUrl: 'timeout.html'     // after the timer is done, go here...
   });
});
</script>

AJAX Calls Might Automatically Reset The Servers Session Time

So what do you do if you have an AJAX call that hits the server and automatically resets the session time? Will the plug-in timer be off! Yes it will. That's why I've included a method were you can tell the plug-in to reset the timer. You use it like so:

$('#sessionTest').cjSessionTimeout("resetTimer");

Just place this piece of code before you make your AJAX call and it will reset this timer. For whatever reason, if you would like to trigger the redirect manually. There's a method to do that as well. Just call the following method:

$('#sessionTest').cjSessionTimeout("timeoutSession");

The URL's

Once the countdown is complete, the plug-in will redirect the browser to the URL provided in the redirectUrl argument. This can be a link to whatever you want, but ideally you want to take the user to someplace where they are informed what has happened. Basically, tell them that their session expired. On my sites, I send them to a screen with the "Session Expired" message with an option to log back in.

If you have requested to keep the session alive, then an iframe will be added to the page with the src pointing to the URL supplied in the loaderURL argument. The loader URL will be called at specifc times during the countdown, based on the value supplied in the loaderInterval argument. The loader page you supply should be a CFM file if you are using ColdFusion. Here's an example session_loader.cfm file that I use:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<title>Session Loader</title>
</head>
<body>
<h1>Session Loader</h1>
</body>
</html>

 

The Options

You have a variety of options you can pass to the plug-in. They are as follows:

ArgumentDescriptionTypeDefaultRequired
timeIntervalThe time in minutes that that timer will perform the redirect.integer30No
redirectUrlThe URL to redirect to after the timeInterval has completed (i.e. After the countdown is complete, it redirects the browser to this URL)stringnullYes
keepAliveIf greater than zero, the plug-in will hide the object and once it is loaded and scaled, it will fade the object back into view. The integer amount is in milliseconds. (This argument is optional)booleanfalseNo
loaderIntervalThe time in minutes to reload the iframe. (If your ISP has a limit of 30 minutes, then you might use 15, etc.)integer10Yes (if keepAlive true)
loaderUrlThe URL to the src page for the iframe. This file should relate to the server language you are using. (i.e. ColdFusion, then it should be a .cfm file. PHP, you might use a .php page to reset the session timer, etc.)stringnullYes (if keepAlive true)

The Methods

You have a few methods that you can use with the plug-in. These effect operational functionality and are listed below:

ArgumentDescriptionExample Use
timeoutSessionThis method gets called once the countdown reaches zero. You can call this method manually to force a redirect.$('#sessionTest').cjSessionTimeout("timeoutSession");
setTimerDisplayThis method is used internally to set the jQuery object with the countdown time. You shouldn't need to call this manually, but its here just the same.$('#sessionTest').cjSessionTimeout("setTimerDisplay");
resetTimerThis method will reset the countdown time to the initial timeInterval value. You can call this method manually if your page triggers a session reset on the server.$('#sessionTest').cjSessionTimeout("resetTimer");

Conclusion

I hope you find this script useful. If you have any suggestions or discover a problem with the code, please give me a shout in the comments. As always, I'm here to help!