Question

I have a dialog that displays a form. When they save or close the dialog I call up the jquery dialog destroy method.

However I am not clear if it removes the html div. From the description I would not think so

Remove the dialog functionality
completely. This will return the
element back to its pre-init state.

However when looking with firebug I can’t see the html container so I am not sure if it gets removed or what. I am not sure if it is because I make the div for the dialog on the fly and use jquery to add it to the page.

Answer 1

It does not destroy the HTML, you can see a demo here. However it does by default hide the container (leaving a display: none on there), so you need to .show() to see it again visually in the page if that’s what you’re after. Here’s the simple demo test code:

<button>Create Dialog</button>
<div id="dialog">Test Content</div>

and the jQuery:

$("button").click(function() {
  $("#dialog").dialog({
    buttons: { 'Destroy Me': function() { $(this).dialog('destroy').show(); } }
  });
});

Running this you can toggle can element from being a dialog and back again.

But, if you want to make sure the dialog is destroyed when you create it, simply destroy any possible copies ahead of time. For example:

    //  destroy any previous dialog of same that may exist
    $(".ui-dialog").filter(function(i) { return $(this).children("#dialog").exist(); }).remove();
    $("#dialog").dialog({ 
        /* dialog options */ 
    });