Using jQuery UI's dialog("destroy") puts element in wrong place?

Question

I have a big form with many parts. For each part, I want to add a small button "Popup as Dialog" which will convert that part to a dialog on-demand, and then (when closing the dialog) to return back to the form with the new inputs.

I am using jQuery UI's dialog() function. The pop-up parts works fine - the sub-form converts into a dialog. However, when I dialog("destroy") the sub-form, the element appears back, but at the end of the DOM document instead of the original location.

Is this a "feature" of dialog()? Anything to do about that? Is there a better way to do this w/o using dialog()?

Answer 1

This worked for me:

• Clone the dialog
• Initialize the cloned dialog (so the original stays on the page)
• Remove the cloned dialog when I'm done with it

Code sample:

$('a.popup-modal').click(function(e){
    var $modal = $(this).closest('form').find('.modal').clone();
    $modal.dialog({
        autoOpen: true, 
        close: function(event, ui){
            $(this).remove();
        }
    });
});