Learning jQuery

Many times when session times out, if the user does not refresh or request a page within the time-out period, the session ends. And it happens without showing any warning to the user. But now, You can alert your website users about Session Timeout using jQuery.

Timeout-dialog.js is a JQuery plugin that displays a timeout popover after a certain period of time. The timeout dialog should be used whenever you want to display to the user that the logged in session is about to expire. It creates a light box with a countdown and options to stay signed in or sign out.

How to use it?

Just download the plugin and include its library reference along with jQuery. A very basic example would be,

$.timeoutDialog();

However, this plugin comes with many options that you can set to define session timeout. Some of them are,

• timeout - The number of your session timeout (in seconds). The timeout value minus the countdown value determines how long until the dialog appears. The default value is 1200.
• countdown - The countdown total value (in seconds). The default value is 60.
• logout_url - The url that will perform a POST request to kill the session. If no logout_url is defined it will just redirect to the url defined in logout_redirect_url.
• logout_redirect_url - The redirect url after the logout happens, usually back to the login url. It will also contain a next query param with the url that they were when timedout and a timeout=t query param indicating if it was from a timeout, this value will not be set if the user clicked the 'No, Sign me out' button.
• title - The title message in the dialog box. The default value is 'Your session is about to expire!'
• message - The countdown message where {0} will be used to enter the countdown value. The default value is ''You will be logged out in {0} seconds.'

$.timeoutDialog({
      timeout: 1, 
      countdown: 60, 
      logout_redirect_url: 'http://mywebsite.com'
});

There are many other options as well which you can set. Please visit the official website for more detail.

Feel free to contact me for any help related to jQuery, I will gladly help you.