Question

我打算使用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秒间隔之前关闭的时间要短得多。有关如何解决此问题的任何想法？感谢。

Answer 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.
    }

});

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

我不知道您的要求，但我的建议是尽可能在其他地方致电refreshPage()。让我知道它是怎么回事。

jquery ui对话框意外关闭

1 个答案: