jquery - 将编辑按钮添加到 JQuery UI 对话框，并在新对话框中加载

Question

必须有一种更干净的方法来完成我在这里尝试做的事情......

我有一个 jquery Ui 对话框，当我单击 FullCalendar 插件中的 eventClick 处理程序时，该对话框会打开。

该对话框包含事件的详细信息。表单底部应该有一个编辑按钮，该按钮将关闭对话框并打开一个包含可编辑表单的新对话框。

在很大程度上我已经成功了，因为编辑按钮确实在对话框中显示了编辑表单。但这不是一个新的对话框，它与第一次单击时的对话框相同，上面有“确定”和“编辑”按钮。

如何为编辑表单打开一个新对话框？

下面是eventClick函数

eventClick: function(event) {                  
                if (event.url) {                           
                     $('#details')
                       .load(event.url)
                       .dialog({                               
                           title: 'Event Details',
                           buttons: { "Ok": function() { $(this).dialog("close"); },
                                      "Edit": function() {
                                        $(this).dialog("close");
                                        $('#details').load('/Events/Edit/' + event.id)
                                                     .dialog({
                                                       title: 'Edit'
                                                           });                                                   
                                                       } }                                   
                            });                                
                        return false;
                    }
                },

Answer 1

我发现有两个问题可能会导致您遇到问题:

1. dialog('close') 只是关闭 对话框，但不清空其 内容。如果你想清空 对话框并将其返回到干净的状态 状态，你想使用 对话框('销毁')。
2. 您有多个 load() 函数调用串在一起，但是 没有任何回调。所以你的 load 尝试加载内容 来自 /Events/Edit/eventID 是 被解雇了，但你立即 再次显示对话框。这 load() 函数有一个回调 将被执行的参数 当内容从返回时 传入 load() 的 url 功能。这样，您的对话框 一旦内容有就会显示 已从服务器收到。

我认为您可以组织代码以使其更易于维护(但它也涉及将一些匿名函数分解为命名函数)的方法如下:

eventClick: function(event) {
    if(event.url) {
        $("#details").load(event.url, loadDialog(event.id));  //call loadDialog once you get content back from your URL
    }
}

function loadDialog(eventId) {
    $("#details").dialog({
        title: "Event Details",
        buttons: {
            "OK" : function() { $(this).dialog("close"); },  //this just closes it - doesn't clean it up!!
            "Edit" : function() {
                $(this).dialog("destroy");  //this completely empties the dialog
                                           //and returns it to its initial state
                $("#details").load("/Events/Edit/" + eventId, loadEditDialog($(this)));
            }
        }
    });
}

function loadEditDialog(theDialogContainer) {  //this is a simple dialog display function -- could be inlined
    $(theDialogContainer).dialog({
        title: "Edit"
    });
}

我希望这有帮助!上面的所有代码都没有经过测试，因此可能存在拼写错误——它主要是解释我的推理的伪代码。如果有疑问，请告诉我，我会相应地更新我的问题。