Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JQuery Show Session Timeout message before session expires in asp.net

Jun 23, 2012
Introduction

In this article I will explain how to show session timeout message before session expires or redirect to login page when user inactive on website using JQuery in asp.net.

Description:
  
In previous article I explained show alert message when user idle or inactive on website using JQuery. I am using that concept here to show session timeout message before session expires when user idle or inactive on website using JQuery in asp.net.

Generally in banking sites if we stay idle for sometime automatically we will get alert like your session is going to expire and it will show options like do you want to continue or Signout. Whenever we click on continue our session will active in that site without any session expire if we click on Sign Out option it will signout from that site and return to home page. We can implement this functionality easily by using available JQuery plug-in.

For that First open Visual Studio and create new website after that right click on your website and add new folder and give name as JS and insert script files in folder you should get it from attached folder same way add another new folders CSS and images and insert required css and images files in respective folders you should get it from attached folder. After that write the following code in your aspx page 


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery Show session timeout message before session expires in asp.net Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.idle-timer.js"></script>
<script type="text/javascript" src="js/timeout-dialog.js"></script>
<link rel="stylesheet" href="css/index.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="css/timeout-dialog.css" type="text/css" media="screen, projection" />
<script type="text/javascript">

$(function() {
var timeout = 60000;
$(document).bind("idle.idleTimer", function() {
// function you want to fire when the user goes idle
$.timeoutDialog({ timeout: 1, countdown: 60, logout_redirect_url: 'http://www.aspdotnet-suresh.com', restart_on_yes: true });
});
$(document).bind("active.idleTimer", function() {
// function you want to fire when the user becomes active again
});
$.idleTimer(timeout);
});

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Aspdotnet-Suresh.Com</h1><b>Show session timeout message before session expires when user idle on website for 5 secs in asp.net</b>
</div>
</form>
</body>
</html>

If you observe above code in header section I added some of script files and css files by using those files we have a chance to show session timeout message when user idle for more than 5 secs (Here I taken 5 sec time you can change it based on your requirement) on website using JQuery in asp.net and you can get those files from attached folder.

In header section if you observe we have a function timeoutDialog() that one we are using to show session timeout popup you can get that function details from timeout-dialog.js file and check below parameters details which are belonging to timeoutDialog() function

timeout: The number of your session timeout (in seconds). The timeout value minus the countdown value determines how long until the dialog appears.

Countdown: The countdown total value (in seconds).

Title: 'Your session is about to expire!' The title message in the dialog box.

Message: 'You will be logged out in {0} seconds.' The countdown message where {0} will be used to enter the countdown value.

Question: 'Do you want to stay signed in?' The question message if they want to continue using the site or not.

keep_alive_button_text: 'Yes, Keep me signed in' The text of the YES button to keep the session alive.

sign_out_button_text: 'No, Sign me out' The text of the NO button to kill the session.

keep_alive_url: '/keep-alive' The url that will perform a GET request to keep the session alive. This GET expects a 'OK' plain HTTP response.

logout_url: 'null' 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.

restart_on_yes: 'true' A boolean value that indicates if the countdown will restart when the user clicks the 'keep session alive' button.

dialog_width: '350' The width of the dialog box.

Now run your application and check the output.

Demo

Download sample code attached






To know more about this JQuery plugin check these sites JQuery Timeout-plugin and JQuery tooltip demo page Timeout-plugin Demo

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

55 comments :

Mukund.Potdar said...

I have a question?

If I Hit "No, Sign me out i will get logout

If I hit browser back button again i will be redirected to previous page

Is there any possible way which i cannot go to previous page

Suresh Dasari said...

@Mukund.Potdar...
You should kill session of user when click on No Sign me out or you should disable browser back button when user was in login page.

Mukund.Potdar said...

I Know to disable browser back button
But Still i am not able to implement correctly

In My Project I have Created
Master Page
home_page.aspx
about_page.aspx
contact page.aspx
admin_page.aspx
user_page.aspx

In which page can i add script tag.

And How to kill session of user

Anonymous said...

Can you tell me what keep-alive would be?

Anonymous said...

Object doesn't support property or method 'dialog'

Anonymous said...

rffd

Anish Patel said...

How do you handle when a user opens the site in a new tab and continues working in the new tab? The previous tab will log the user out?

Anonymous said...

can you tell me what is mvc and how it is used?

Suneel Vanka said...

It is not working in Internet expoler and google chorme.

Suresh Dasari said...

@Suneel vanka...
it's working in all browsers i tested it. Please check your code.

Suneel Vanka said...

ok thank you.
it's working.
how to kill the session by using jQuery.

Suneel Vanka said...
This comment has been removed by the author.
Suneel Vanka said...

please suresh help me.i am not bale to understand how u set the time. my requirement is i have to set default time is 10 minutes. if user is idle in 10 mintes. last 99 seconds on words i have to show the count down could please help me. i am not able to use your code because of time problem.
i under satnd something i applied it is show ing two time formats

Anonymous said...

I Know to disable browser back button
But Still i am not able to implement correctly

In My Project I have Created
Master Page
home_page.aspx
about_page.aspx
contact page.aspx
admin_page.aspx
user_page.aspx

In which page can i add script tag.

And How to kill session of user
I Know to disable browser back button
But Still i am not able to implement correctly

In My Project I have Created
Master Page
home_page.aspx
about_page.aspx
contact page.aspx
admin_page.aspx
user_page.aspx

In which page can i add script tag.

And How to kill session of user
I Know to disable browser back button
But Still i am not able to implement correctly

In My Project I have Created
Master Page
home_page.aspx
about_page.aspx
contact page.aspx
admin_page.aspx
user_page.aspx

In which page can i add script tag.

And How to kill session of user

Anonymous said...

I am trying to figure out what part is missing. Somehow keepAlive does not postback even if I would supply url to the actual aspx page. How to set up settings.keep_alive_url correctly so it postback. Now the function works fine but session not get extended and session_end event get fired . Any advice ?

David Cohen said...

I am using IE8 and Visual Studio 2010. When I click either button, to close the session, or continue, I get the following error:

Microsoft JScript runtime error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Can you explain what I am doing wrong? Thank you.

David Cohen

Anonymous said...

I am getting the same error as David.

David Cohen said...

Can someone help us out? Thanks.

Kalim.Paracha said...

Suresh Brother

First off all i will appriciate will you by this efforts. its very learning for fresh and New Commr
i use this link Session_timeout its realy great work but i have some proplem with this.
i make a Job Portal and use your code i have many page with MasterPage tell me just its create a new page to run this code Or include Login page there Session is started..i try to another page including project but not working....and i change my path is like:::
http://localhost:19803/Home.aspx
when session out and redirect to Home page

i hope u will batter guideness for me and other brothers. i will wating yout good responce..

Kalim.Paracha said...

hey Suneel Vanka;
hope u will be fine..
i read your comment you can say "its ok" its mean this code working good with your project
let me tell where use this code,
for example:
1: in master page
2: in seprate web form
3: or use our pervious session
tell me best solution to impliments this code: i m waiting your good responce
Regards
Kaleem Paracha

ANKIT VERMA said...

Dear suresh how to handle username and password as you see in gmail login screen.

case sensitive

Ronald Baskin said...

I am getting the following Error:
Microsoft JScript runtime error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Anonymous said...

@Ronald --Change $(this).dialog('close');to $("#timeout-dialog").dialog('close');Then it will work

breserk said...

thank youuuuuuuuuuuuuuuuuuuuu

sush said...

Hi
I am also getting same error
"I am getting the following Error:
Microsoft JScript runtime error: cannot call methods on dialog prior to initialization; attempted to call method 'close'"

and

where to change this code
$(this).dialog('close');to $("#timeout-dialog").dialog('close');

Nikunj Patel said...

"Yes,Keep me in signed in" and "No, sign out me" button event not fired.....How to do it?

naga said...

Hi,
It is working fine as far as u work on same page.But,if you open any pop up from main page and keep on working on that popup,then the main page will logout automatically once the specified time is over.
How to solve this?

sanath said...

how to show opacity in background..its not coming with the example

Anonymous said...

For the error " cannot call methods on dialog prior to initialization; attempted to call method 'close'". You change the code in .js file "timeout-dialog.js" at line no 118 from "$(this).dialog('close');" to "$("#timeout-dialog").dialog('close');". Then it worked for me.. Thanks

Anonymous said...

hi in this event of button is not fired plz answer me

santosh kumar patro said...

Hi Suresh,

I have a requirement where the session timeout is 20min and I need to show the popup just after 18min has elapsed. I went through the code and found the values set are confusing me a lot. Can you please help me in the purpose of the values set in the sample download code.

Thanks & Regards,
Santosh Kumar Patro

sagar said...

button are not firing event..help us suresh sir

aravind said...

haiii...
I need to know ..the session is alive when postback of controls(asp.net c#) inside the update panel...

Hruday Rakesh said...

Hi suresh Iam getting this error:$(elem).on($.trim((opts.events+' ').split(' ').join('.idleTimer ')),handleUserEvent);

Anonymous said...

Hi Suresh,
It is working fine as far as u work on same page.But,if you open any pop up from main page and keep on working on that popup,then the main page will logout automatically once the specified time is over.
How to solve this?

Anonymous said...

Hi i download your code and run it vs 2010 its not working message with 2 button appears but when I click on any button nothing happened

Thank You

Anonymous said...

Nice Job Suresh.
Some of friends have asked that in IE it is not working but actually in IE after 5 seconds if we click the page then popup comes but in Mozila, popup comes automatically after 5 seconds.

Anonymous said...

hi,
when i click a button(yes or no)no action
could you help me please

Anonymous said...

and also iwould like to block the current page when the session is expired

Surya Kant said...

@suryakant: change on timeout_dialog.js file to solve button click not firing and close button error :-
destroyDialog: function() {
if ($("#timeout-dialog").length) {
$(this).dialog("close");// old
$("#timeout-dialog").dialog("close");
$('#timeout-dialog').remove();
}
}

Anonymous said...

Hi please send me application of send sms to mobile number after registration complete with user name and password detail to mobile number.
Please send me application or code on ajayshedge1@gmail.com

Vj said...

Not working in Master Page

Anonymous said...

Hi thanks for your post..
But I'm getting this error
1. ($.isPlainObject(value)) is showing "Microsoft JScript runtime error: Object doesn't support this property or method" in jQuery-ui.js file
2.$(elem).on($.trim((opts.events+' ').split(' ').join('.idleTimer ')),handleUserEvent); is showing Microsoft JScript runtime error: Object doesn't support this property or method in jquery.idle-timer.js file.

Thanks for help !!!

Anonymous said...

IE 8 dialog is not coming automatically when timeout. After clicking on mouse dialog is coming. bUt all other browser its coming automatically.

Anonymous said...

@Suresh Dasari..
Can you please help me ...
IE 8 dialog is not coming automatically when timeout. After clicking on mouse dialog is coming. bUt all other browser its coming automatically.

Anonymous said...

Hi,

please help me.. how to increase the idle time to 15mins? Thanks

umesh lade said...

Hello sir i want to make logout in multiple tab if user logout from one browser tab user automatically logout from remaining open browser tab how to achive this like facebook

Anand Manmohan Bohra said...

based on all comments above for error, will you please upload new working example as even in my case both buttons are not working
please give example for sign in button & signout button

Anonymous said...

Hi sir,
i aad this code in master page it is working fine for first page but when i am moveing to next page it throws a error - idleTimer function is undefine.

so please help me for this

Anonymous said...

any way to increase session timeout?

Anonymous said...

Can we get this solution in javascript?

Mustafa Jhabuawala said...

I am not able to use it. It shows the following error:

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Please help me out....

Anonymous said...

Not working in master page. Please Help

Anonymous said...

Its not working

dgarcia said...

Suresh,

I got everything working pretty well. Thank you so much for the code and sample project. My only problem now is that when I click on Yes, keep me signed it, it closes the dialog and immediately displays it again. Session and idle timer doesn't seem to get refreshed. It appears as if code just resets when dialog should display and the timeout value for this is just 1 second, since idle timer is the one that controls when dialog displays the first time. Any suggestions?

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.