Sometimes in an Intranet you need to notify the client that his session is about to expire and let him to decide if he will renew his session or let it die. That can be done either on server or client side.

We will discuss here the client-side way using Javascript and/or Ajax to refresh the session.
The script offers two ways of refreshing the session, one by just reloading the page and other by calling an Ajax function.

If your template is a form, you will want definitively to use Ajax, or you would lose all the fields already filled in. If you are in a simple display page, refreshing that page will not cause any problems.

So, I used a sample my friend Pedro Claudio posted on the CF-Brasil mailing group, and modified it to be used in CF templates with CFAJAX components (not the CF8 tag). I also modified it to use the Javascript function “setInterval()” instead of the “settimeout()” which will continue counting the time after every renewal.

I created this test environment that you may download here.

There are some scoped variables to use. I’m used to Fusebox, so I define them either in my “Application.cfc” or in my “fusebox.init.cfm”:

application.sessionTimeout = 10; // session timeout in seconds (we set it to 10 secs for this test)
application.sessionTimeoutAlert = 5; //how many seconds before the timeout to send the alert
application.sessionTimeoutUseAjax = true; //use Ajax or reload the page
request.sessionTimeoutURL = "index.cfm?fuseaction=home.logout"; //URL to jump when client denies refreshing
request.scriptDir = "scripts/"; //folder for the javascripts
request.componentDir = "components/"; //folder for the components
request.sessionRefreshFunction = "sessionRefresh"; //name of the function to call

Put the following code in the HEAD section:

<cfif application.sessionTimeoutUseAjax>
	<script type='text/javascript' src='#request.scriptDir#ajax/engine.js'></script>
	<script type='text/javascript' src='#request.scriptDir#ajax/util.js'></script>
	<script type='text/javascript' src='#request.scriptDir#ajax/settings.js'></script>
<script language="JavaScript" type="text/javascript">
	var _cfscriptLocation = "#replace(request.componentDir, '.','/','all')#/ajaxFunctions.cfc";
	var sessionTimeoutAlert = #application.sessionTimeoutAlert#;
	var sessionTimeoutDays = 0;
	var sessionTimeoutHours = 0 + (sessionTimeoutDays *60);
	var sessionTimeoutMinutes = 0 + (sessionTimeoutHours *60);
	var sessionTimeoutSeconds = (#application.sessionTimeout# + (sessionTimeoutMinutes *60)) - sessionTimeoutAlert;
	var sessionTimeout = sessionTimeoutSeconds * 1000;
		function() {
			if(confirm('Your session will expire soon, do you want to continue? '))
			<cfif application.sessionTimeoutUseAjax>
				DWREngine._execute(_cfscriptLocation, null, 'sessionRefresh', 'true', sessionTimeoutResult);
				window.location.href = window.location.href;
			else windows.location.href='#request.sessionTimeoutURL#';
	<cfif application.sessionTimeoutUseAjax>
		function sessionTimeoutResult(result){
			// do nothing

6 thoughts on “Session Timeout Notice Using Javascript

  1. Hi Karolyne,
    I forgot that Linux is case sensitive and I posted the file name in lower case.
    It is fixed now.
    Thanks for your feedback.

  2. Pedro,
    I cannot have all the credits. You did a good job and I followed some ideas of my co-workers Matt and Sean. We use CFAJAX here for several sites and they came up with the idea of refreshing the session without losing the form’s content. I just put that in writing.
    Thanks for your comments.

  3. Ricardo,

    This code is AWESOME!!!! I could not find how to do this (refreshing the form without losing what the user already typed in) anywhere on the web, but your method here of using CFAJAX turned out to be EXACTLY what i needed! Thank you very much…. you rock, man!

  4. @Brian,
    Thanks for your comment, I’m glad you could make use of the code, but the credits should be extended to Pedro Claudio, Matt and Sean too.
    If you ever come with any ideas and want to post here, please be my guest.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.