0

我打算使用 jquery-ui 实​​现交互式取消按钮对话框。当用户单击取消时，会弹出确认对话框。当用户单击是时，它将根据响应状态进行响应。这是我实现代码的方式。

function refreshPage() {
window.location.reload(true);
}

$(function() {
setTimeout(refreshPage,30000);

var cancelJob = function(e) {
    e.preventDefault();
    $('.hiddenCancelPopup').dialog({
        modal: true,
        buttons: {
            "Yes": function() {
                var bookingJobNo = $('.cancelButton').attr("rel");
                var channel = $('.cancelButton').attr("channel");
                var deviceId = $('.cancelButton').attr("deviceId");
                if(readCookie("mbtx_session_id") == null) {
                    $(".invalidId").dialog({});
                    return;
                }
                jQuery.get('/rest/v2/booking/cancel/'+  bookingJobNo + "?channel=" + channel + "&deviceId=" + deviceId,  function(result) {
                    if(result.status == 501) {
                        $(".hiddenCancelledPopup").dialog({
                            modal: true,
                            buttons: {
                                "OK": function() {
                                    alert("OK");
                                    window.location.reload(true);
                                    //$( this ).dialog( "close" );
                                }
                            }
                        });
                    } else {
                        $(".hiddenFailedCancelPopup").dialog({
                            modal: true,
                            buttons: {
                                "OK": function() {
                                    $( this ).dialog( "close" );
                                }
                            }
                        });
                    }
                });
             },
            "No": function() {
                $(this).dialog("close");
            }
        }
    });
}

$(".cancelButton").on('click',cancelJob);

$("body").on({
    ajaxStart: function(cancelJob) {
        $(this).addClass("loading");
    },
    ajaxStop: function(cancelJob) {
        $(this).removeClass("loading");
        refreshPage();
    }
});

此实现的问题在于，在显示 时$(".hiddenCancelledPopup").dialog，即使在用户单击OK按钮之前，对话框也会意外关闭。它在消失之前显示了一小会儿。

我意识到setTimeout(refreshPage,30000);（这意味着每 30 秒刷新一次）可能会导致问题，但我观察到对话框在 30 秒间隔之前关闭的时间要短得多。关于如何解决这个问题的任何想法？谢谢。

4

1 回答 1

1

通过查看您的代码，我怀疑问题出在 ajax 调用停止时，即在您的代码的以下部分中。

$("body").on({

    ajaxStart: function(cancelJob) {
        $(this).addClass("loading");
    },
    ajaxStop: function(cancelJob) {
        $(this).removeClass("loading");
        refreshPage();    //page refreshes after any ajax call stops after executing.
    }

});

很可能，当带有类的 UI 对话框hiddenCancelledPopup出现时，ajaxStop函数内部的代码会执行，并且它会刷新您在其中调用的页面refreshPage()，因此您的弹出窗口会在任何用户交互之前消失。

我不知道你的要求，但我的建议是尽可能refreshPage()在其他地方打电话。让我知道情况如何。

于 2013-05-07T05:22:00.117 回答