Create Session Timeout Alert Popup Using jQuery Plugin – jTimeout

by Posted on

If you want to apply session timeout message alert just before 1 minute of expiring session and user have privilege to extend session or logout then jTimeout is awesome jQuery plugin to do these type of things in less effort. jTimeout is a small yet highly configurable session timeout and keep-alive control implemented in jQuery.
session-timeout-alert-popup
This cross-tab jQuery plugin keeps track of time and lets a user know before their session times out so they can extend it. Then tells them when it has expired so they can login again. The coolest part about jTimeout is that if a user loads 4 tabs with jTimeout on them, only 1 will control the countdown. If a tab is closed, another one will take over counting down. If another tab is opened, the timer will be reset (since the session timeout was reset). The only time the timer isn’t reset but could/should be, is when an AJAX call is made to a page that doesn’t include jTimeout.


Libraries

Include the following required libraries on page.

<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script> <!-- Include jQuery -->
<script src='jAlert.min.js'></script> 
<script src='jTimeout.min.js'></script> <!-- Include this Plugin -->

JS

By calling single line of function activate the session timeout alert popup box.

 $(function(){
    $.jTimeout(options);
  });




Here are the list of option you can pass above function to customize session timeout alert popup box.

$(function(){
   $.jTimeout({
		flashTitle: true, //whether or not to flash the tab/title bar when about to timeout, or after timing out
		flashTitleSpeed: 500, //how quickly to switch between the original title, and the warning text
		flashingTitleText: '**WARNING**', //what to show in the tab/title bar when about to timeout, or after timing out
		originalTitle: document.title, //store the original title of this page
 
		timeoutAfter: 1440, //pass this from server side to be fully-dynamic. For PHP: ini_get('session.gc_maxlifetime'); - 1440 is generally the default timeout
		heartbeat: 1, //how many seconds in between checking the expiration - warning: changing this can effect your prior countdown warning and timeout - for best results, stick with 1
 
		extendOnMouseMove: true, //Whether or not to extend the session when the mouse is moved
		mouseDebounce: 30, //How many seconds between extending the session when the mouse is moved (instead of extending a billion times within 5 seconds)
		onMouseMove: false, //Override the standard $.get() request that uses the extendUrl with your own function.
 
		extendUrl: '/dashboard', //URL to request in order to extend the session.
		logoutUrl: '/logout', //URL to request in order to force a logout after the timeout. This way you can end a session early based on a shorter timeout OR if the front-end timeout doesn't sync with the backend one perfectly, you don't look like an idiot.
		loginUrl: '/login', //URL to send a customer when they want to log back in
 
		secondsPrior: 60, //how many seconds before timing out to run the next callback (onPriorCallback)
		onPriorCallback: false, //override the popup that shows when getting within x seconds of timing out
 
		onClickExtend: false, //override the click to extend button callback
 
		onTimeout: false, //override the timeout function if you'd like
		onSessionExtended: false //override the session extension method (triggered only after a timeout)
	}
   );
   $.jTimeout().getExpiration(); //gets the expiration date string
   $.jTimeout().getSecondsTillExpiration(); //gets the number of seconds until the session expires
});

Set the default session length in PHP (Recommend for php based script)

$.jTimeout({ 'timeoutAfter': <?php echo ini_get('session.gc_maxlifetime'); ?> });

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by HTMLGuyLLC. Visit their official github repository for more information and follow for future updates.


Published by admin