jQuery UI對話框取消針對Ajax請求

Question

我試圖通過表單提交發送多條信息。 關於此提交，我想返回false（取消頁面請求，因為它已經是ajax）並關閉表單。 不幸的是，我認為，收盤似乎也確實會返回。 這樣發布請求不會失敗。 這使對話框仍然顯示在屏幕上。 如果我調用$（“＃dialog-form”）。dialog（“ close”）; 然后返回false不會運行，並且頁面會更改。

如果有人知道如何解決此問題，或者我做錯了什么，那將非常有幫助：

javascript：

$('#modifyConsoleForm').submit(function(evt) {
    $.ajax({
        type : 'POST',
        url : jQuery("#modifyConsoleForm").attr("action"),
        data : jQuery(this).serialize(),
        dataType : "json",
        success : function(data) {
            hideError();
        },
        error : function(data) {
            setError('modify of console failed');
        }
    });
    $("#dialog-form").dialog("close");
    return false;
});

和我的對話框初始化：

$("#dialog-form").dialog({
    autoOpen : false,
    height : 300,
    width : 350,
    modal : true,

    close : function() {
        allFields.val("").removeClass("ui-state-error");
    }
});

我也嘗試過在對話框關閉時始終返回false，但似乎沒有用。 我想念什么嗎？

Answer 1

嘗試使用event.preventDefault（）停止頁面更改

例如：

$('#modifyConsoleForm').submit(function(evt) {

    evt.preventDefault();

    $.ajax({
        type : 'POST',
        url : jQuery("#modifyConsoleForm").attr("action"),
        data : jQuery(this).serialize(),
        dataType : "json",
        success : function(data) {
            hideError();
        },
        error : function(data) {
            setError('modify of console failed');
        }
    });
    $("#dialog-form").dialog("close");
    return false;
});

Answer 2

在成功和錯誤功能中，應該在ajax請求完成后關閉對話框並返回true / false。

明智的做法是，在運行ajax請求時放置一個活動指示器，並在從服務器獲得響應后隱藏/刪除該指示器，這樣用戶就知道正在進行中。