Question

我有一个带有两个按钮Add和Cancel的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中保留断点来逐行执行，则不会发生此行为。请帮助解决并帮助我理解。提前谢谢。

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

Answer 2

您的逻辑应该类似于：

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选项使它们异步。

Answer 3

我理解需要全局“保存”功能，因为它不需要一遍又一遍地编写相同的脚本。

尝试做这样的事情：

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); //!!!

        }
    }
});

然后：

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") //!!!!

            }
        }
    });
}

这样，在收到AJAX响应之前，不会调用close函数。

编辑：我还会将dlg变量和save()函数名称设置为全局变量，方法是将它们附加到window对象，如下所示：< / p>

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

这将确保它们始终可用。

Jquery对话框关闭功能

3 个答案: