Добавление кнопки редактирования в диалоговое окно JQuery UI и загрузка в новом диалоговом окне

Question

Должен быть более чистый способ сделать то, что я пытаюсь сделать здесь ...

У меня есть диалоговое окно jquery Ui, которое открывается, когда я нажимаю на обработчик eventClick в плагине FullCalendar.

Диалоговое окно содержит подробную информацию о событии.В нижней части формы должна быть кнопка редактирования, которая закроет диалоговое окно и откроет новое с редактируемой формой.

По большей части мне это удалось, в том смысле, чточто кнопка редактирования действительно вызывает форму редактирования в диалоговом окне.НО это не новое диалоговое окно, это то же самое диалоговое окно с первого щелчка, с кнопками ОК и редактирования на нем.

Как получить новое диалоговое окно для формы редактирования?

Ниже приведена функция 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') просто закрывает диалоговое окно, но не очищает его содержимое.Если вы хотите очистить диалоговое окно и вернуть его в чистое состояние, вы должны использовать dialog('destroy').
2. . У вас есть несколько load() вызовов функций, связанных друг с другом, но у вас нет обратных вызовов.Таким образом, ваша загрузка, которая пытается загрузить содержимое из /Events/Edit/eventID, запущена, но затем вы сразу же снова отображаете диалоговое окно.Функция load() имеет параметр обратного вызова, который будет выполняться при возврате содержимого из URL-адреса, переданного в функцию 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" );
            }
        }
    });