session time out warning in javascript with jquery dialog

Asked 24/7, 2015 at 11:28 Answered 4/8, 2016 at 8:56

javascript jquery jquery-ui timeout session-timeout

I am trying to implement a javascript session time out popup. Please help me. I am able to show popup for first time but when i click ok next time popup is coming in next one minute.For testing i gave 3 min time. Please help me resolve this.I am not able to reset the timer on mouseclick.

</head>
<body>
<div id="dialog" style="display:none;" title="Dialog Title">Your session is going to expire in 10min</div>
<script>
var lefttime=4;
var interval;
setTimeout( 'ShowTimeoutWarning();', 180000 );


function ShowTimeoutWarning()
{

$( "#dialog" ).dialog( "open" );
return false;

}

$("#dialog").dialog({
autoOpen: false,
dialogClass: "no-close",
position: 'center' ,
title: 'session',
draggable: false,
width : 300,
height : 200,
resizable : false,
modal : true,
buttons: [
    {
      text: "OK",
      click: function() {
        ShowTimeoutWarning();
        $( this ).dialog( "close" );
     
      }
    }
  ]
});

document.onkeyup=setTimeout( 'ShowTimeoutWarning();', 180000 );
document.onkeydown=setTimeout( 'ShowTimeoutWarning();', 180000 );
document.click=setTimeout

</script>

Recipience answered 24/7, 2015 at 11:28 Comment(1)

Can you show us some code, html, and javascript, please? – Kyliekylila 24/7, 2015 at 11:30

Do you mean something like this?

You need to set a variable to the setTimeout return value so that you can clear that timeout before setting another one.

Javascript

var timeoutID;
resetTimeout();

function resetTimeout(){
    if( timeoutID ) clearTimeout( timeoutID );
    timeoutID = setTimeout( ShowTimeoutWarning, 180000 );
}


function ShowTimeoutWarning() {
    $( "#dialog" ).dialog( "open" );
    return false;
}


$("#dialog").dialog({
    autoOpen: false,
    dialogClass: "no-close",
    position: 'center' ,
    title: 'session',
    draggable: false,
    width : 300,
    height : 200,
    resizable : false,
    modal : true,
    buttons: [{
        text: "OK",
        click: function() {
            ShowTimeoutWarning();
            $( this ).dialog( "close" ); 
        }
    }]
});

document.onkeyup   = resetTimeout;
document.onkeydown = resetTimeout;
document.onclick   = resetTimeout;

Heretofore answered 24/7, 2015 at 11:41 Comment(8)

Thanks Tom for your answer. is this code will reset timer? document.onkeyup = resetTimeout; document.onkeydown = resetTimeout; document.click = resetTimeout; – Recipience 24/7, 2015 at 11:46

yeah it will - although I've just updated it slightly, you need onclick not click. Should work now though. I've also just now added the resetTimeout() call to the beginning of the code. Without that, it won't get set until the keyboard/mouse events are triggered. – Heretofore 24/7, 2015 at 11:51

Sorry its not working. I am not able to see popup even for single time – Recipience 24/7, 2015 at 12:3

Are you sure? I've checked the code on jsfiddle and it seems to work for me. Did you see my edit the previous comment stating that I updated the code to call resetTimeout(); at the top of the script? Without that, it won't do a lot. – Heretofore 24/7, 2015 at 12:8

Here's a simplified jsfiddle (jsfiddle.net/p754n85t/1) using alerts instead of your dialogue script which has a timeout of 5 seconds. – Heretofore 24/7, 2015 at 12:9

Yes. I was using ur old code. Now i saw u updated code with resetTimeout. Now it is working fine.Thanks u – Recipience 24/7, 2015 at 12:28

No problem - in that case if you'd kindly accept the answer as correct I'd be very grateful :) – Heretofore 24/7, 2015 at 12:30

i did it as answered. but may be shown once i got some reputation. – Recipience 24/7, 2015 at 12:46

Please find below code. time is set to 1 min. Before 55 sec popup message will come

is postabck:

    if (!this.IsPostBack)
    {
            Session["Reset"] = true;
            Configuration config =WebConfigurationManager.    OpenWebConfiguration("~/Web.Config");
            SessionStateSection section =(SessionStateSection) config.GetSection("system.web/sessionState");

            int timeout = (int)section.Timeout.TotalMinutes * 1000 * 60;
            Page.ClientScript.RegisterStartupScript(this.GetType(), "onLoad", "DisplaySessionTimeout(" + timeout + ")", true);             
        }

Jquery & popup Message:

 <div id="ExpireConfirm_Submit">
<table>
    <tr>
        <td style="width: 230px;">
            Your Session will expire in <span id="seconds"></span>&nbsp;seconds.<br />Do you
            want to logout?
        </td>
    </tr>
</table>

<script type="text/javascript">
 var sessionTimeout = "<%= Session.Timeout %>";
 function DisplaySessionTimeout(timeout) {
    var seconds = timeout / 1000;
    document.getElementsByName("seconds").innerHTML = seconds;
    setInterval(function () {
        seconds--;
        document.getElementById("seconds").innerHTML = seconds;
    }, 1000);
    setTimeout(function () {
        //Show Popup before 20 seconds of timeout.
        $("#ExpireConfirm_Submit").dialog({
            height: 200,
            width: 400,
            resizable: false,                
            modal: true,                
            title: "Session Expire Confirmation",                              
            open: function () {
                $('p#id1').html(sessionTimeout);
            },
            buttons: {
                "Yes": function () {                        
                    $(location).attr("href", "/Account/Logout").submit();
                    $(this).dialog("close");
                },
                "No": function () {                        
                    ResetSession();
                    $(this).dialog("close");
                }
            }
        }).prev(".ui-dialog-titlebar").css("background", "red");
    }, timeout - 55 * 1000);
    setTimeout(function () {
        $(location).attr("href", "/Account/Logout").submit();
    }, timeout);
};
function ResetSession() {
    window.location = window.location.href;
}    
</script>

This is best Example for show popup warning before session timeout

Pinard answered 12/2, 2016 at 6:41 Comment(0)

You should try this

<script>
$(document).ready(function () {

                var time = 30 * 1000 * 60; //session timeout 30 min
                var timeout;
                var isLogout = false;

                timeout = setTimeout(function() {
                    //Things you need to do
                        isLogout = true;

                }, time);

                $(document).on('click', function () {
                    if (!isLogout) {
                        clearTimeout(timeout);
                        timeout = setTimeout(function() {
                            //Things you need to do
                             isLogout = true;
                        }, time);
                    }
                });
            });
</script>

Breathed answered 4/8, 2016 at 8:56 Comment(0)

Recommended topics

Hot tags