How to handle popup and Parent window together on "sessionTimeOut"
I am working on a demo functionality, where a "Main" window opens a
"Wizard" in a popup window and a "Summary" in Lightbox. And If a user
don't work on the complete demo (including main window, popup and
lightbox) the user should get a prompt that the session will expire.
I am using sessionTimeOut Plugin from
"https://github.com/ehynds/jquery-idle-timeout" for to implement the
session expire functionality. And its working fine on the "Main" page
where I have implemented.
But the issue is, even if I an working on the "Summary"(Lightbox) page or
"Wizard"(Popup), on main window session expire warning prompts, yes,
because as per the above mentioned plugin, warning will appear if that
particular page/window if idle for some seconds.
My question is how this function can be changed so that it doesn't prompt
the "Session Expiry warning" if the user is working on any of these "Main,
Popup or Lightbox" windows. Also if, the user has popup/lightbox open and
then if he gets the session expiry msg, then it should close the Child
(Popup/Lightbox) Window and logoff from the parent window.
Code for Session Expiry Msg taken from above mentioned plugin :
<link
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="~/Scripts/js/jquery.idletimeout.js"></script>
<script src="~/Scripts/js/jquery.idletimer.js"></script>
<body>
<div id="dialog" title="Your session is about to expire!">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin:
0 7px 50px 0;"></span>You will be logged off in <span
id="dialog-countdown" style="font-weight: bold"></span>seconds.
</p>
<p>Do you want to continue your session?</p>
</div>
</body>
<script type="text/javascript">
// setup the dialog
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 400,
height: 200,
closeOnEscape: false,
draggable: false,
resizable: false,
buttons: {
'Yes, Keep Working': function () {
$(this).dialog('close');
},
'No, Logoff': function () {
// fire whatever the configured onTimeout callback
is.
// using .call(this) keeps the default behavior of
"this" being the warning
// element (the dialog in this case) inside the
callback.
$.idleTimeout.options.onTimeout.call(this);
}
}
});
// cache a reference to the countdown element so we don't have
to query the DOM for it on each ping.
var $countdown = $("#dialog-countdown");
// start the idle timer plugin
$.idleTimeout('#dialog', 'div.ui-dialog-buttonpane
button:first', {
idleAfter: 600,
pollingInterval: 2,
serverResponseEquals: 'OK',
onTimeout: function () {
window.location = "/Home/Index/";
},
onIdle: function () {
$(this).dialog("open");
},
onCountdown: function (counter) {
$countdown.html(counter); // update the counter
}
});
</script>
Script: for opening Popup Window:
function basicPopup(url) {
var popupWindow = window.open(url, 'popUpWindow',
'height=800,width=1350,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,
status=yes');
}
Function to call Lightbox:
//Lightbox Function
$(document).ready(function () {
$(".various").fancybox({
maxWidth: 1000,
maxHeight: 800,
fitToView: false,
width: '80%',
height: '80%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});
});
Please let me know if you need some more details.
Thank You
No comments:
Post a Comment