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请求时放置一个活动指示器，并在从服务器获得响应后隐藏/删除该指示器，这样用户就知道正在进行中。