Introduction:
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.
To know more about this JQuery plugin check these sites JQuery Timeout-plugin and JQuery tooltip demo page Timeout-plugin Demo
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 Email
|
|||
|
|
|
36 comments :
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
@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.
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
Can you tell me what keep-alive would be?
Object doesn't support property or method 'dialog'
rffd
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?
can you tell me what is mvc and how it is used?
It is not working in Internet expoler and google chorme.
@Suneel vanka...
it's working in all browsers i tested it. Please check your code.
ok thank you.
it's working.
how to kill the session by using jQuery.
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
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
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 ?
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
I am getting the same error as David.
Can someone help us out? Thanks.
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..
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
Dear suresh how to handle username and password as you see in gmail login screen.
case sensitive
I am getting the following Error:
Microsoft JScript runtime error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
@Ronald --Change $(this).dialog('close');to $("#timeout-dialog").dialog('close');Then it will work
thank youuuuuuuuuuuuuuuuuuuuu
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');
"Yes,Keep me in signed in" and "No, sign out me" button event not fired.....How to do it?
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?
how to show opacity in background..its not coming with the example
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
hi in this event of button is not fired plz answer me
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
button are not firing event..help us suresh sir
haiii...
I need to know ..the session is alive when postback of controls(asp.net c#) inside the update panel...
Hi suresh Iam getting this error:$(elem).on($.trim((opts.events+' ').split(' ').join('.idleTimer ')),handleUserEvent);
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?
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