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

Question

There should 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 information about the event. At the bottom of the form there should be an edit button that closes the dialog box and opens a new one with an editable form.

For the most part, I have succeeded in the sense that the edit button does open the edit form in the dialog box. BUT this is not a new dialog box, it is the same dialog box from the first click, with the OK and edit buttons.

How can I open a new dialog for an 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 problems that can cause problems:

• dialog('close') just closes the dialog, but not the content. If you want a dialog and return it to a clean state, you want to use dialog('destroy') .
• You have several calls to the load() functions linked to each other but do not have callbacks. So your download, which is trying to load content from /Events/Edit/eventID is fired, but then you immediately display the dialog again. The load() function has a callback parameter that will be executed when the content is returned from the URL passed to the load() function. Thus, your dialogue will be displayed as soon as the content has been received from the server.

The way I thought you could organize your code so that it is a little more convenient (but also involves putting some of your anonymous functions in named functions) 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" }); } 

Hope this helps! All of the above code has not been tested, so there may be typos - this is basically pseudo code to explain my reasoning. If you have any questions, let me know and I will update the relevant question.

Answer 2

you can also try 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" ); } } });