Question

从今天早上起，我一直在研究这些东西。我想在jQuery对话框中显示计时器。我正在关注this文章。

以下是我的JavaScript代码：

<script src="~/Scripts/jquery-ui-1.11.3.min.js"></script>
<!-- include smoothness jQueryUI theme -->
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="js/jquery.idle-timer.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>    

<script type="text/javascript">
var idleTime = 2000; // number of miliseconds until the user is considered idle
var initialSessionTimeoutMessage = 'Your session will expire in <span id="sessionTimeoutCountdown"></span> seconds.<br /><br />Click on <b>OK</b> to continue your session.';
var sessionTimeoutCountdownId = 'sessionTimeoutCountdown';
var redirectAfter = 10; // number of seconds to wait before redirecting the user
var redirectTo = ' http://www.google.com'; // URL to relocate the user to once they have timed out
var keepAliveURL = 'keepAlive.php'; // URL to call to keep the session alive
var expiredMessage = 'Your session has expired.  You are being logged out for security reasons.'; // message to show user when the countdown reaches 0
var running = false; // var to check if the countdown is running
var timer; // reference to the setInterval timer so it can be stopped
$(document).ready(function() {
// create the warning window and set autoOpen to false
var sessionTimeoutWarningDialog = $("#dialog");
$("#dialog").html(initialSessionTimeoutMessage);
$("#dialog").dialog({
    'closeOnEscape': false,
    'minHeight': 50,
    'title': 'Session Expiration Warning',
    'modal': true,
    'autoOpen': false,
    'width': 574,
    'resizable': false,
    'draggable': false,
    'beforeclose': function() { // bind to beforeclose so if the user clicks on the "X" or escape to close the dialog, it will work too
        // stop the timer
        clearInterval(timer);

        // stop countdown
        running = false;

        // ajax call to keep the server-side session alive
        $.ajax({
          url: keepAliveURL,
          async: false
        });
    },
    'buttons': {
        OK: function() {
            // close dialog
            $(this).dialog('close');
        }
    },
    'open': function() {
        // scrollbar fix for IE
        $('body').css('overflow','hidden');
    },
    'show': {
        'effect': 'fade'
    },
    'close': function() {
        // reset overflow
        $('body').css('overflow','auto');
    }
}); // end of dialog


// start the idle timer
$.idleTimer(idleTime);

// bind to idleTimer's idle.idleTimer event
$(document).bind("idle.idleTimer", function(){
    // if the user is idle and a countdown isn't already running
    if($.data(document,'idleTimer') === 'idle'){
        var counter = redirectAfter;
        running = true;

        // intialisze timer
        $('#'+sessionTimeoutCountdownId).html(redirectAfter);
        // open dialog
        $(sessionTimeoutWarningDialog).dialog('open');

        // create a timer that runs every second
        timer = setInterval(function(){
            counter -= 1;

            // if the counter is 0, redirect the user
            if(counter === 0) {
                $(sessionTimeoutWarningDialog).html(expiredMessage);
                $(sessionTimeoutWarningDialog).dialog('disable');
                window.location = redirectTo;
            } else {
                $('#'+sessionTimeoutCountdownId).html(counter);
            };
        }, 1000);
    };
});

});
</script>

以下是我的HTML：

 <h1>jQuery session timeout countdown with warning dialog</h1>
<p>
    This idle timeout countdown is triggered after 2 seconds. Keep your mouse and keyboard still!
    <br /><br />
    <a href="http://www.google.com">Return to Blog Post</a>
</p> <div id="dialog" title="Basic dialog" style="display:none">
<p id="dialog_content"> </p>

该页面在浏览器中成功打开，但内容有一些控制台错误，如下所示：

enter image description here

更新

<link rel="stylesheet"     href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui-1.11.3.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.idle-timer.js">/script>

Answer 1

检查第一行jQuery idleTimer插件是该教程所必需的，我认为你没有包含它。

Answer 2

检查正确的脚本引用顺序：jQuery应该在jQuery UI之前添加！

所以在你的情况下：

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.idle-timer.js"></script>

如果有帮助，请告诉我，

阿尔贝托

Answer 3

是的，我得到了解决方案。以下是我更新的jQuery代码：

我已经更新了整个jQuery代码，以便我的新代码对其他人有用。

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.idle-timer.js">       </script>
<script src="~/Scripts/jquery-ui-1.11.3.min.js"></script>


<script type="text/javascript">
var idleTime = 2000; // number of miliseconds until the user is considered idle
var initialSessionTimeoutMessage = 'Your session will expire in <span id="sessionTimeoutCountdown"></span> seconds.<br /><br />Click on <b>OK</b> to continue your session.';
var sessionTimeoutCountdownId = 'sessionTimeoutCountdown';
var redirectAfter = 10; // number of seconds to wait before redirecting the user
var redirectTo = ' http://www.google.com'; // URL to relocate the user to once they have timed out
var keepAliveURL = 'keepAlive.php'; // URL to call to keep the session alive
var expiredMessage = 'Your session has expired.  You are being logged out for security reasons.'; // message to show user when the countdown reaches 0
var running = false; // var to check if the countdown is running
var timer; // reference to the setInterval timer so it can be stopped
**jQuery(function ($) {**
    var sessionTimeoutWarningDialog = $("#dialog");
    $("#dialog").html(initialSessionTimeoutMessage);
    $("#dialog").dialog({
        'closeOnEscape': false,
        'minHeight': 50,
        'title': 'Session Expiration Warning',
        'modal': true,
        'autoOpen': false,
        'width': 574,
        'resizable': false,
        'draggable': false,
        'beforeclose': function (event, ui) { // bind to beforeclose so if the user clicks on the "X" or escape to close the dialog, it will work too
            // stop the timer
            clearInterval(timer);

            // stop countdown
            running = false;

            // ajax call to keep the server-side session alive
            $.ajax({
                url: keepAliveURL,
                async: false
            });
        },
        'buttons': {
            OK: function (event, ui) {
                // close dialog
                $(this).dialog('close');
            }
        },
        'open': function (event, ui) {
            // scrollbar fix for IE
            $('body').css('overflow', 'hidden');
        },
        'show': {
            'effect': 'fade'
        },
        'close': function (event, ui) {
            // reset overflow
            $('body').css('overflow', 'auto');
        }
    }); // end of dialog

    // start the idle timer
    $.idleTimer(idleTime);

    // bind to idleTimer's idle.idleTimer event
    $(document).bind("idle.idleTimer", function () {
        // if the user is idle and a countdown isn't already running
        if ($.data(document, 'idleTimer') === 'idle') {
            var counter = redirectAfter;
            running = true;

            // intialisze timer
            $('#' + sessionTimeoutCountdownId).html(redirectAfter);
            // open dialog
            $(sessionTimeoutWarningDialog).dialog('open');

            // create a timer that runs every second
            timer = setInterval(function () {
                counter -= 1;

                // if the counter is 0, redirect the user
                if (counter === 0) {
                    $(sessionTimeoutWarningDialog).html(expiredMessage);
                    $(sessionTimeoutWarningDialog).dialog('disable');
                    window.location = redirectTo;
                } else {
                    $('#' + sessionTimeoutCountdownId).html(counter);
                };
            }, 1000);
        };
    });
});

mvc中的倒计时器使用jQuery Dialog

3 个答案: