jQuery UI对话框取消针对Ajax请求

Question

Im trying to send multiple pieces of information via a form submit. On this submit I would like to return false (cancel page request as it has been ajax) and close the form. Unfortunately close seems to also do return, true i assume. So that the post request doesn't fail. This leaves the dialog still on the screen. And if I call $("#dialog-form").dialog("close"); then return false does not run and the page changes.

If anyone knows how to fix this or if im doing something wrong it would be very helpful:

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;
});

and my dialog initialisation:

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

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

I have also tried always returning false in the dialogs close but it didnt seem to work. Am I missing something?

Answer 1

Try using event.preventDefault() to stop the page changing

eg:

$('#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

Closing the dialog and returning true/false should be done when the ajax request has been finished, in the success and error functions.

It is also wise that you put an activity indicator while you run ajax requests and hide/remove it once you got the response from the server, this way users know that there is a process going on.