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

我发现可能导致您出现问题的两个问题：

dialog('close')只关闭了对话框，但不会清空它内容。如果你想清空对话框并将其恢复为干净州，你想用 dialog('destroy')。
你有几个load()函数调用，但是没有任何回调。所以你的尝试加载内容的加载来自/Events/Edit/eventID 解雇，但后来你马上再次显示对话框。该 load()函数有一个回调函数将被执行的参数从内容返回时该网址传入load() 功能。这样，你的对话框会在内容出现后显示已从服务器收到。

我认为你可以组织你的代码以便它更易于维护（但它还涉及将一些匿名函数分解为命名函数）的方法如下：

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

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

Answer 2

您也可以尝试这样的事情：

$("#details").dialog({
        title: "Event Details",
        buttons: {
             ...
            "Edit" : function() {
                $(this).dialog( "option", "buttons", { "OK":...});
                $("#details").load("/Events/Edit/" + eventId);
                $(this).dialog( "option", "title", "Edit" );
            }
        }
    });

将编辑按钮添加到JQuery UI对话框，然后加载到新对话框中

2 个答案: