Adding an edit button to a JQuery UI dialog box, and loading in a new dialog

Question

There must be a cleaner way to do what i'm trying to do here...

I have a jquery Ui dialog box that opens when i click on the eventClick handler in the FullCalendar plugin.

The dialog box contains the details of the event. On the bottom of the form there should be an edit button, that will close the dialog box down and open a new one with an editable form in it.

For the most part i've succeeded, in the sense that the edit button does indeed bring up the edit form in a dialog box. BUT it's not a new dialog box, it's the same dialog box from the first click, with the OK and edit buttons on it.

How do a i get a new dialog box to open for the edit form?

Below is the eventClick function

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

I see two issues that may be causing your problems:

1. dialog('close') merely closes the dialog, but doesn't empty its contents. If you want to empty the dialog and return it to a clean state, you want to use dialog('destroy').
2. You have several load() function calls strung together, but don't have any callbacks. So your load that tries to load the content from /Events/Edit/eventID is fired, but then you immediately display the dialog again. The load() function has a callback parameter that will get executed when the content is returned from the url passed in to the load() function. This way, your dialog would display once the content has been received from the server.

A way that I thought you could organize your code so that it's a little more maintainable (but it also involves breaking out some of your anonymous functions into named functions) is below:

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

I hope this helps! All the code above wasn't tested, so there could be typos -- it's mainly pseudo-code to explain my reasoning. If there are questions, let me know and I'll update my question accordingly.

Answer 2

you can try also something like this:

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