idle timer not working

Question

I have two jQuery idle timers one below and the other is similar code with timeout values higher than the first one. I commented timeout values for the second one. The two scripts are running on the same xhtml page. When the first modal(one with lower timeout) pops up, I can't close it and also it doesn't go to the redirect page after the "myTimeout" value.

(function($){
            var timer;
            //var timeout = 600000;
            //var myTimeOut = 120000;
            var timeout = 120000;
            var myTimeOut = 60000;
                $(document).bind("idle.idleTimer", function(){
                  $( "#popup-modal" ).dialog({ 
                    modal: true,
                    autoOpen: true,
                    width: 574,
                    resizable : false,
                    draggable:false,
                    open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); $(".ui-dialog-print").hide(); $(".ui-icon").hide(); },
                    show: {effect: 'fade'} 
                    });
                timer = window.setTimeout(function()
                {  window.location.href = "redirectpage.xhtml";},myTimeOut);
                });
            $(document).bind("active.idleTimer", function(){
                timeout = 120000;
               window.clearTimeout(timer);
            });
            $.idleTimer(timeout);
        })(jQuery);

Answer 1

Have you tried adding a handler for the dialog's close event?

(function ($) {
    'use strict';
    var timer;
    var timeout = 120000;
    var myTimeOut = 60000;
    //var timeout = 600000;
    //var myTimeOut = 120000;
    function resetRedirectTimer() {
        timeout = 120000;
        window.clearTimeout(timer);
    };
    $(document).bind('idle.idleTimer', function () {
        $("#popup-modal").dialog({
            'modal': true,
            'autoOpen': true,
            'width': 574,
            'resizable': false,
            'draggable': false,
            'close': function (event, ui) {
                resetRedirectTimer();
            },
            'open': function (event, ui) {
                $('.ui-dialog-titlebar-close').hide();
                $('.ui-dialog-print').hide();
                $('.ui-icon').hide();
            },
            'show': {
                'effect': 'fade'
            }
        });
        timer = window.setTimeout(function () {
            window.location.href = 'redirectpage.xhtml';
        }, myTimeOut);
    });
    $(document).bind('active.idleTimer', function () {
        resetRedirectTimer();
    });
    $.idleTimer(timeout);
}(jQuery));

Also, you appear to be hiding the default controls for closing the dialog when the dialog is opened. Do you still have a button (or other control) with which to close the dialog?

Finally, to clarify the problem, it looks like you want to redirect the user after 60 seconds of inactivity but cancel the redirect if they become active again.

Is that what you are trying to accomplish?

Hope this helps.

Pete