The demo at this URL is horribly confusing with unclear references to "UI counters" and a different demo than the "recommended" setup. Please cleanup this demo so it accurately portrays the application scenario!
For my project, I'm trying to implement a session timeout popup without using a postback. I've added RadNotification tag to the aspx page, assigned ShowInterval and Value properties on the RadNotification from code behind, and now I'm stuck trying to get the javascript to work for the countdown and redirect. I want the notification popup to countdown from 60 and then redirect to another page, however I can not figure out the javascript piece from the demo. Am I correct in assuming I only need the UpdateTimeLabel() and ContinueSession() functions? How do i wire these up so they start firing when the notification is displayed? Is the pageLoad() javascript function needed for this scenario (unclear from the demo)?
Here is my tag in aspx:
<telerik:RadNotification ID="RadNotification1" runat="server" Position="Center" Width="240" Height="100" OnCallbackUpdate="OnCallbackUpdate" LoadContentOn="PageLoad" AutoCloseDelay="60000" Title="Continue Your Session" TitleIcon="" Skin="Office2007" EnableRoundedCorners="true" ShowCloseButton="false" KeepOnMouseOver="false"> <ContentTemplate> <div class="infoIcon"> <img src="images/infoIcon.jpg" alt="info icon" /> </div> <div class="notificationContent"> Time remaining: <span id="timeLbl">60</span> <telerik:RadButton Skin="Office2007" ID="continueSession" runat="server" Text="Continue Your Session" Style="margin-top: 10px;" AutoPostBack="false" OnClientClicked="ContinueSession"> </telerik:RadButton> </div> </ContentTemplate> </telerik:RadNotification>Code behind:
if (!IsPostBack) { //set the expire timeout for the session Session.Timeout = 2; //configure the notification to automatically show 1 min before session expiration RadNotification1.ShowInterval = (Session.Timeout - 1) * 60000; //set the redirect url as a value for an easier and faster extraction in on the client RadNotification1.Value = Page.ResolveClientUrl("default.aspx"); }And javascript (using a <script> tag directly under <body> tag):
function UpdateTimeLabel(toReset) { var sessionExpired = (seconds == 0); if (sessionExpired) { //stopTimer("timeLeftCounter"); //redirect to session expired page - simply take the url which RadNotification sent from the server to the client as value window.location.href = $find("<%= RadNotification1.ClientID %>").get_value(); } else { var timeLbl = $get("timeLbl"); timeLbl.innerHTML = seconds--; } } function ContinueSession() { var notification = $find("<%= RadNotification1.ClientID %>"); //we need to contact the server to restart the Session - the fastest way is via callback //calling update() automatically performs the callback, no need for any additional code or control notification.update(); notification.hide(); //resets the showInterval for the scenario where the Notification is not disposed (e.g. an AJAX request is made) //You need to inject a call to the ContinueSession() function from the code behind in such a request var showIntervalStorage = notification.get_showInterval(); //store the original value notification.set_showInterval(0); //change the timer to avoid untimely showing, 0 disables automatic showing notification.set_showInterval(showIntervalStorage); //sets back the original interval which will start counting from its full value again //stopTimer("timeLeftCounter"); //seconds = 60; //updateMainLabel(true); }12 Answers, 1 is accepted
Hello,
Here is a simplified version of the code that uses only one timer (having two makes things more complex, as can be expected):
<script type="text/javascript"> var timeLeftCounter = null; var seconds = 60; function pageLoad() { var xmlPanel = $find("<%= RadNotification1.ClientID %>")._xmlPanel; xmlPanel.set_enableClientScriptEvaluation(true); }; function stopTimer(timer) { clearInterval(this[timer]); this[timer] = null; }; function resetTimer(timer, func, interval) { this.stopTimer(timer); this[timer] = setInterval(Function.createDelegate(this, func), interval); }; function OnClientShowing(sender, args) { resetTimer("timeLeftCounter", UpdateTimeLabel, 1000); } function UpdateTimeLabel(toReset) { var sessionExpired = (seconds == 0); if (sessionExpired) { stopTimer("timeLeftCounter"); window.location.href = $find("<%= RadNotification1.ClientID %>").get_value(); } else { var timeLbl = $get("timeLbl"); timeLbl.innerHTML = seconds--; } } function ContinueSession() { var notification = $find("<%= RadNotification1.ClientID %>"); notification.update(); notification.hide(); var showIntervalStorage = notification.get_showInterval(); notification.set_showInterval(0); notification.set_showInterval(showIntervalStorage); stopTimer("timeLeftCounter"); seconds = 60; }</script><telerik:RadNotification ID="RadNotification1" runat="server" Position="Center" Width="240" Height="100" OnCallbackUpdate="OnCallbackUpdate" OnClientShowing="OnClientShowing" LoadContentOn="PageLoad" AutoCloseDelay="60000" Title="Continue Your Session" TitleIcon="" Skin="Office2007" EnableRoundedCorners="true" ShowCloseButton="false" KeepOnMouseOver="false"> <ContentTemplate> Time remaining: <span id="timeLbl">60</span> <telerik:RadButton Skin="Office2007" ID="continueSession" runat="server" Text="Continue Your Session" Style="margin-top: 10px;" AutoPostBack="false" OnClientClicked="ContinueSession"> </telerik:RadButton> </ContentTemplate></telerik:RadNotification>Essentially, I copied the code from the demo, removed the bits I did not want and found the function that works with the first timer so I can find its usages and remove them.
To elaborate on each of the remaining functions:
- the pageLoad handler is needed because of the specifics of the XmlHttpPanel and RadButton controls + the client callbacks.
- stopTimer and resetTimer are helper functions
- OnClientShowing is the notification handler that fires when it shows up. This is where you start the countdown that will, once expired, redirect to the other page and will, in the meantime, update the remaining seconds in the notification.
- UpdateTimeLabel is where the above calculation occurs via a global variable and a timer.
- ContinueSession is what is used when the button in the notification is clicked. More details about it are avaialble in the demo's code as comments and in its description.
Regards,
Marin BratanovTelerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
Rank 1
I did make one modification though: I wrapped the RadNotification with an <asp:UpdatePanel> with the Update="Always" option since my pages make extensive use of AJAX and I tested that an AJAX request does successfully reset the session timeout.
Thanks again for the info, hopefully this will help anyone else trying to implement the same scenario.
Rank 1
Hi Marin,
I had already implemented the java script and aspx same as yours in the master page.How can i Reset the Session Timer while editing the screen.even i had applied the UpdateMode="Always" with the asp:updatedpanel,it haven't got updated.Please find the Code below and tell me if i did anything wrong.Any help will be appreciated.
<script language="javascript" type="text/javascript">
var timeLeftCounter = null;
var seconds = 60;
var secondsBeforeShow = 60;
//start the main label counter when the page loads
function pageLoad() {
var xmlPanel = $find("<%= RadNotification1.ClientID %>")._xmlPanel;
xmlPanel.set_enableClientScriptEvaluation(true);
};
//stop timers for UI
function stopTimer(timer) {
clearInterval(this[timer]);
this[timer] = null;
};
//reset timers for UI
function resetTimer(timer, func, interval) {
this.stopTimer(timer);
this[timer] = setInterval(Function.createDelegate(this, func), interval);
};
function OnClientShowing(sender, args) {
//deal with UI labels
resetTimer("timeLeftCounter", UpdateTimeLabel, 1000);
}
//-----------------------end of code related only to the demo UI --------------------------------------//
function UpdateTimeLabel(toReset) {
var sessionExpired = (seconds == 0);
if (sessionExpired) {
stopTimer("timeLeftCounter");
//redirect to session expired page - simply take the url which RadNotification sent from the server to the client as value
window.location.href = $find("<%= RadNotification1.ClientID %>").get_value();
}
else {
var timeLbl = $get("timeLbl");
timeLbl.innerHTML = seconds--;
}
}
function ContinueSession() {
var notification = $find("<%= RadNotification1.ClientID %>");
//we need to contact the server to restart the Session - the fastest way is via callback
//calling update() automatically performs the callback, no need for any additional code or control
notification.update();
notification.hide();
//resets the showInterval for the scenario where the Notification is not disposed (e.g. an AJAX request is made)
//You need to inject a call to the ContinueSession() function from the code behind in such a request
var showIntervalStorage = notification.get_showInterval(); //store the original value
notification.set_showInterval(0); //change the timer to avoid untimely showing, 0 disables automatic showing
notification.set_showInterval(showIntervalStorage); //sets back the original interval which will start counting from its full value again
stopTimer("timeLeftCounter");
seconds = 60;
}
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<ClientEvents OnRequestStart="ContinueSession" OnResponseEnd="ContinueSession" />
</telerik:RadAjaxManager>
<asp:UpdatePanel runat="server" UpdateMode="Always">
<ContentTemplate>
<telerik:RadNotification ID="RadNotification1" runat="server" Position="Center" Width="650"
Height="100" OnCallbackUpdate="OnCallbackUpdate" OnClientShowing="OnClientShowing"
LoadContentOn="PageLoad" AutoCloseDelay="60000" Title="Continue Your Session"
EnableRoundedCorners="true" ShowCloseButton="false">
<ContentTemplate>
<div class="infoIcon">
<%--<img src="SRPS_IMAGES/infoIcon.jpg" alt="info icon" />--%></div>
<div class="notificationContent">
Your current working session will be expired in <span id="timeLbl" style="font-weight: bold">
60</span> Sec.<br />
Please continue your work or save your data before auto logout. Otherwise, your
data will be lost.
<telerik:RadButton ID="btncontinueSession" runat="server" Text="Continue" Style="margin-top: 10px;
margin-left: 250px; margin-right: auto;" AutoPostBack="false" OnClientClicked="ContinueSession">
</telerik:RadButton>
</div>
</ContentTemplate>
</telerik:RadNotification>
</ContentTemplate>
</asp:UpdatePanel>
for aspx page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'set the expire timeout for the session
Session.Timeout = 3
'configure the notification to automatically show 1 min before session expiration
RadNotification1.ShowInterval = (Session.Timeout - 1) * 60000
'set the redirect url as a value for an easier and faster extraction in on the client
RadNotification1.Value = Page.ResolveClientUrl("~/Logout.aspx")
End Sub
Protected Sub OnCallbackUpdate(ByVal sender As Object, ByVal e As RadNotificationEventArgs)
End Sub
Hi,
Try including the script in the update panel so the global JS variables for the timers get reset when the response is received.
Regards,
Telerik by Progress
Rank 1
Hi Marin,
Thanks for your Immediate Response.All my ASpx pages mostly include java script and the calculation is been done mostly in java script only.After changing the values in a particular screen or even clicking on a particular radtextbox with mouse,is it possible to reset the Session Timer???..if so can u post any example for it.Any help will be appreciated.
Hi,
You should just call the ContinueSession JavaScript function when needed if the functionality is related to client-side interaction.
If the actions perform a postback, the UpdatePanel with UpdateMode=Always that contains the notification and the script should suffice.
Regards,
Telerik by Progress
Rank 1
Hi Marin,
Thanks for your reply.But i have many aspx pages in my project.I need something in common in the master page .When we Perform any Client side action in any of the aspx pages or any mouse click,it should hit the master page and the timer should get resetted based on it. can u help you on this by providing any sample..
Hi,
I don't have such a sample because such code would be highly specific to the application. You could, for example, attach a handler to the desired HTML element(s) with jQuery.
Note that RadNotification is not an activity monitor tool, but a simple toaster popup that can pull data and/or show on certain intervals. Session Notification is not a built-in feature, but an example use case - a block of code performs some application logic and makes the notification show up at some point. This is the approach you should take - implement the detection logic and at the desired point call the notification API to show or update it.
Regards,
Telerik by Progress
Rank 1
Hi Marin,
Thanks for the reply.Just i wanted to know one more thing,is there any other way to reset the session timer without using the RadNotification?.Please advice me on this
Hi,
Just about any request to the server will renew the user session, and the following blog post will show you some: http://www.telerik.com/blogs/different-ways-to-make-a-request-to-the-server.
RadNotification only facilitates timers and provides a few easy to use events (plus a nice UI), that's all. Session timers and renewals are done by the .NET framework.
Regards,
Telerik by Progress
Rank 1
Hi Marin,
I've followed almost all the Telerik forums and docs on this and able to get RadNotification running this from Site.Master under asp:UpdatePanel for asp.net application.
The issue is following code from Site.Master.cs does not work from a page "save" event.
if (!IsPostBack) { //set the expire timeout for the session Session.Timeout = 2; //configure the notification to automatically show 1 min before session expiration RadNotification1.ShowInterval = (Session.Timeout - 1) * 60000; //set the redirect url as a value for an easier and faster extraction in on the client RadNotification1.Value = Page.ResolveClientUrl("logout.aspx"); }
The code is executed fine however RadNotification still takes you to the logout page(timer kicks in but session is session is still alive I can still access rest of application menus as the session has been reset (somehow it is not updating radNotification under updatepanel which works otherwise). Is there anyway to make it work?
Thanks,
M.
Hello,
Here are my suggestions for this case:
1. Ensure that the notification works as expected when AJAX is disabled:
https://www.telerik.com/support/kb/aspnet-ajax/ajaxmanager/details/get-more-descriptive-errors-by-disabling-ajax
2. Check the client-side resetting logic for this specific scenario provided in the Description of the following live sample:
https://demos.telerik.com/aspnet-ajax/notification/examples/sessiontimeout/defaultcs.aspx
3. Try replacing the UpdatePanel with RadAjaxPanel
4. You can also check these samples:
- https://demos.telerik.com/aspnet-ajax/ajaxpanel/application-scenarios/persisting-javascript/defaultcs.aspx
- https://demos.telerik.com/aspnet-ajax/ajaxpanel/application-scenarios/recreate-scripts/defaultcs.aspx
5. If the issue remains, you can open a formal support thread to send us a very basic isolated runnable sample demonstrating the problem so we can further investigate it locally.
Regards,
Eyup
Progress Telerik