1

我有一个带有两个按钮添加和取消的 Jquery 对话框。用户将输入几个字段，然后按添加按钮，我正在进行 UI 修改和验证。完成所有操作后，我将关闭对话框。但问题是，即使我在保存和其他操作后关闭对话框，但在操作完成之前对话框正在关闭。

下面是我的 Jquery 对话框代码，

    dlg.dialog({
        height:300,
        width:600,
        modal:true,
        autoOpen:true,
        title: "Add Property",
        closeOnEscape:true,
        buttons: {
            "Cancel": function() {
                $(this).dialog("close");
            },
            "Create Property": function() {
                    //Validate Property 
                    // Save Property 
                    $(this).dialog("close");
                }
            }
        }
     }); 

    function save() {
       $.ajax({
        type: 'POST',
        url: ServiceUrl,
        data: parameter,
        success : function(data) {

            // Convert the response text to JSON format
            var jsonData = eval('(' + data + ')');

            if (jsonData.results) {
                   // success
            } 
         }
      });
    };

在上面的代码中，我正在执行 $(this).dialog("close"); 在验证和保存功能之后，但我的对话框正在关闭，在这些功能完成之前。如果我通过在 firebug 中保留断点来逐行执行，则不会发生此行为。请帮助解决并帮助我理解。提前致谢。

4

3 回答 3

1

由于.ajax()调用是异步的，因此$(this).dialog("close");不会等待.ajax()调用完成。看到保存/验证成功后，将调用成功放入dlg.dialog("close");里面。.ajax()

dlg.dialog({
    height:300,
    width:600,
    modal:true,
    autoOpen:true,
    title: "Add Property",
    closeOnEscape:true,
    buttons: {
        "Cancel": function() {
            $(this).dialog("close");
        },
        "Create Property": function() {
                //Validate Property 
                // Save Property 
                $.ajax({
                    success: function (response) {
                       //test to see if the response is successful...then
                       dlg.dialog("close");
                    },
                    error: function (xhr, status, error) {
                       //code for error condition - not sure if $(this).dialog("close"); would be here.
                    }
                })
            }
        }
    }
 });
于 2012-11-05T19:48:33.203 回答
0

I understand the need for a global "save" function, as it eliminates the need to write the same script over and over again.

Try doing something like this:

dlg.dialog({
    height: 300,
    width: 600,
    modal: true,
    autoOpen: true,
    title: "Add Property",
    closeOnEscape: true,
    buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        },
        "Create Property": function () {

            save(true); //!!!

        }
    }
});

And then:

function save() {
    $.ajax({
        type: 'POST',
        url: ServiceUrl,
        data: parameter,
        success: function (data) {
            // Convert the response text to JSON format
            var jsonData = eval('(' + data + ')');
            if (jsonData.results) {

                //!!!! Then close the dialog
                dlg.dialog("close") //!!!!

            }
        }
    });
}

This way, your close function is not called until the AJAX response is received.

EDIT: I would also set the dlg variable and the save() function-name as globals by attaching them to the window object like so:

window.dlg = $("#myDialogElement");
window.save = function () {
    //function stuff here 
}

This will ensure they're always available.

于 2012-11-05T19:59:27.637 回答
0

您的逻辑应该类似于：

dlg.dialog({
    height:300,
    width:600,
    modal:true,
    autoOpen:true,
    title: "Add Property",
    closeOnEscape:true,
    buttons: {
        "Cancel": function() {
            $(this).dialog("close");
        },
        "Create Property": function() {
                $.ajax({//Validate request
                    ...
                    success:function(response){
                        $.ajax({//Save request
                            ...
                            success:function(response){
                                //close the dialog here
                            }
                        });
                    }
                });
            }
        }
    }
 });

您可以像这样链接您的 ajax 调用，也可以通过传递一个async:false选项使它们异步。

于 2012-11-05T19:50:01.453 回答