CODEWITHSUNDEEP
javascriptjquerysession
TheCarver
TheCarver

Reputation: 19723

How to implement a session expiration reminder with JavaScript?

I really want to prompt my user to keep the session alive, shortly before it expires.

Yesterday, I asked the question "How can I check if the session is dead, then prompt an alert?" and somebody answered with an AJAX/JSON solution, that made calls every 30 seconds to an ASP page. This didn't work, as the calls to the server kept the session alive - so it would never log out.

I kept reading and came across a similar [SO] question, where somebody suggested using a JS countdown that prompted the user to renew the session, 5 minutes before the session is due to expire.

This is what I have done so far but:

  1. The function startMainTimer does not seem to be keeping the time because I did not receive an alert when the timer was due to alert.
  2. The $('body').mousedown() feature doesn't work as it should. It works but if a user clicks a link, the mousedown function works but doesn't follow the link after the function has run.

Here’s the code:

<script>
$(document).ready(function() {
    $.ajax({ // get session expiration value e.g. 60
    type : 'GET',
    url : '../getSessionValue.asp',
    dataType : 'text',
    success : function(data) {
        if (data != '') {
            var newSessionValue = data - 5
            startMainTimer(newSessionValue * 60000); // deduct 5 minutes, convert to mSeconds & call startNewTimer()
        }
    }
    });

    $('body').mousedown( function() { // if user clicks anywhere on page call ajaxRenewSession() function
        ajaxRenewSession();
    });

    $('#userButtonRenewSession').click( function() { // if user clicks continue browsing button
        ajaxRenewSession();
    });
});

function startMainTimer(newSessionValue,restart) {
    if (restart == 'yes') {
        clearInterval(interval);
    }
    var counter = 0;
    var interval = setInterval(function() {
        counter++;
        if (counter == newSessionValue) {
            alert("Your session is about to expire!");
            clearInterval(interval);
        }
    }, 1000);
}

function ajaxRenewSession() { // AJAX the server to renew session, get session timeout value and then reset JS timer
    $.ajax({
    type : 'GET',
    url : '../renewSession.asp',
    dataType : 'text',
    success : function(data) {
        if (data != '') {
                var newSessionValue = data - 5
                startMainTimer(newSessionValue * 60000, 'yes');
        }
    }
    });
}
</script>

Can anybody help me rectify these problems?

Upvotes: 1

Views: 3692

Answers (1)

Yogu
Yogu

Reputation: 9445

The thing with mouseup seems to work, I tested it on stackoverflow.com. However, it may not work in some cases, e.g. if the user presses a link, drags it and then drops it. In this case, no event was raised for me.

Another thing: You will have to clear the main timer at the beginning of startMainTimer because otherwise, everytime the user clicks somewhere, an additional timer would be started.

And you know that the last call of startMainTimer misses a parameter?

Upvotes: 1

Related Questions