I've found this jquery session timeout that I want to use in my project.

It looks work fine in background, altough I want to show countdown time in a text?

How can I show the timer, or do you guys have any other suggestion except this?

(function( $ ){
    jQuery.sessionTimeout = function( options ) {
        var defaults = {
            message      : 'Your session is about to expire.',
            keepAliveUrl : '/keep-alive',
            redirUrl     : '/timed-out',
            logoutUrl    : '/log-out',
            warnAfter    : 900000, // 15 minutes
            redirAfter   : 1200000 // 20 minutes
        };

        // Extend user-set options over defaults
        var o = defaults,
                dialogTimer,
                redirTimer;

        if ( options ) { o = $.extend( defaults, options ); }

        // Create timeout warning dialog
        $('body').append('<div title="Session Timeout" id="sessionTimeout-dialog">'+ o.message +'</div>');
        $('#sessionTimeout-dialog').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            closeOnEscape: false,
            open: function() { $(".ui-dialog-titlebar-close").hide(); },
            buttons: {
                // Button one - takes user to logout URL
                "Log Out Now": function() {
                    window.location = o.logoutUrl;
                },
                // Button two - closes dialog and makes call to keep-alive URL
                "Stay Connected": function() {
                    $(this).dialog('close');

                    $.ajax({
                        type: 'POST',
                        url: o.keepAliveUrl
                    });

                    // Stop redirect timer and restart warning timer
                    controlRedirTimer('stop');
                    controlDialogTimer('start');
                }
            }
        });

        function controlDialogTimer(action){
            switch(action) {
                case 'start':
                    // After warning period, show dialog and start redirect timer
                    dialogTimer = setTimeout(function(){
                        $('#sessionTimeout-dialog').dialog('open');
                        controlRedirTimer('start');
                    }, o.warnAfter);
                    break;

                case 'stop':
                    clearTimeout(dialogTimer);
                    break;
            }
        }

        function controlRedirTimer(action){
            switch(action) {
                case 'start':
                    // Dialog has been shown, if no action taken during redir period, redirect
                    redirTimer = setTimeout(function(){
                        window.location = o.redirUrl;
                    }, o.redirAfter - o.warnAfter);
                    break;

                case 'stop':
                    clearTimeout(redirTimer);
                    break;
            }
        }

        // Begin warning period
        controlDialogTimer('start');
    };
})( jQuery );

and this is the working sample => /

I've found https://github./travishorn/jquery-sessionTimeout this jquery session timeout that I want to use in my project.

It looks work fine in background, altough I want to show countdown time in a text?

How can I show the timer, or do you guys have any other suggestion except this?

(function( $ ){
    jQuery.sessionTimeout = function( options ) {
        var defaults = {
            message      : 'Your session is about to expire.',
            keepAliveUrl : '/keep-alive',
            redirUrl     : '/timed-out',
            logoutUrl    : '/log-out',
            warnAfter    : 900000, // 15 minutes
            redirAfter   : 1200000 // 20 minutes
        };

        // Extend user-set options over defaults
        var o = defaults,
                dialogTimer,
                redirTimer;

        if ( options ) { o = $.extend( defaults, options ); }

        // Create timeout warning dialog
        $('body').append('<div title="Session Timeout" id="sessionTimeout-dialog">'+ o.message +'</div>');
        $('#sessionTimeout-dialog').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            closeOnEscape: false,
            open: function() { $(".ui-dialog-titlebar-close").hide(); },
            buttons: {
                // Button one - takes user to logout URL
                "Log Out Now": function() {
                    window.location = o.logoutUrl;
                },
                // Button two - closes dialog and makes call to keep-alive URL
                "Stay Connected": function() {
                    $(this).dialog('close');

                    $.ajax({
                        type: 'POST',
                        url: o.keepAliveUrl
                    });

                    // Stop redirect timer and restart warning timer
                    controlRedirTimer('stop');
                    controlDialogTimer('start');
                }
            }
        });

        function controlDialogTimer(action){
            switch(action) {
                case 'start':
                    // After warning period, show dialog and start redirect timer
                    dialogTimer = setTimeout(function(){
                        $('#sessionTimeout-dialog').dialog('open');
                        controlRedirTimer('start');
                    }, o.warnAfter);
                    break;

                case 'stop':
                    clearTimeout(dialogTimer);
                    break;
            }
        }

        function controlRedirTimer(action){
            switch(action) {
                case 'start':
                    // Dialog has been shown, if no action taken during redir period, redirect
                    redirTimer = setTimeout(function(){
                        window.location = o.redirUrl;
                    }, o.redirAfter - o.warnAfter);
                    break;

                case 'stop':
                    clearTimeout(redirTimer);
                    break;
            }
        }

        // Begin warning period
        controlDialogTimer('start');
    };
})( jQuery );

and this is the working sample => http://jsfiddle/xHEF9/515/

• javascript
• jquery
• asp
• timer
• countdown

• Whats your problem? its working fine!!! – Subin Jacob Commented Dec 20, 2013 at 9:19
• I cannot show the timer in a text – user3122158 Commented Dec 20, 2013 at 9:23
• If you could do this, then y can't you do it now? – Subin Jacob Commented Dec 20, 2013 at 9:26
• It's from woking sample github./travishorn/jquery-sessionTimeout that I cannot show the countdown from variable or timer. I think $('.mytimertext').text(timervariable) may works, but I do not know here can I put this exactly and what can I put instead of timervariable? Do you have any idea? – user3122158 Commented Dec 20, 2013 at 9:30
• While it is possible to get time left from setTimeout() itself, this plugin doesn't seem to provide that functionality. – Magnus Engdal Commented Dec 20, 2013 at 9:38

1 Answer 1

Try this

var SessionTime = 10000;
var tickDuration = 1000;

var myInterval = setInterval(function() {
    SessionTime = SessionTime - tickDuration
    $("label").text(SessionTime);
}, 1000);

var myTimeOut = setTimeout(SessionExpireEvent, SessionTime);

$("input").click(function() {
    clearTimeout(myTimeOut);
    SessionTime = 10000;
    myTimeOut = setTimeout(SessionExpireEvent, SessionTime);
});

function SessionExpireEvent() {
    clearInterval(myInterval);

    alert("Session expired");
}

See this jsFiddle example.