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.