Article: Gracefully Timing Out A Session Using Ajax & CSS

Demo:

For demonstration purposes we have setup this page to timeout every 30 seconds.

• After 10 seconds user is prompted with a message to refresh session.
• User clicks on "Refresh" and their session is refreshed via AJAX call back to the server.
• If the refresh completes fine then the user resumes their work.
• If the refresh failes, then the page prompts the user with error
• If the user does not refresh in the alloted time, then user is taken to a dialog that gracefully informs them that their session has timed out.
• User then logs back in to return to resume their work within the application

Things To Notice:

1. When you refresh, your current page remains the same. Imaging you had a large letter you typed up and if you had submitted the application after your session had timed out, you would have lost the information (unless you had save it to your copy-buffer) before you posted the form.
2. While the message is displayed, you cannot click anywhere else. So you cannot navigate around the application. This prevents the user from navigating around while a response is needed.
3. While you are not able to navigate within the application, if you were under FireFox with multiple tabs open the modal dialog is vaid only within the application window and not across all tabs. So you can still navigate within your other tabs.
4. If you do not refresh in the alloted time, the message changes to inform you that your session had timed out. And by clicking "ok" it redirects the user to login. This feature is good when you walk away for a extended period of time and when you return or in a shared environment someone else uses the browser, and all you can do is read the message about the session timeout and return to login.
5. The feature explained in #4 can be used as a "Web Application Lockout" feature where after x minutes of idle, the application goes into a lockout mode and you need to enter a valid password to unlock the screen.

Return To Article