jQuery UI Dialog behaves unpredictably

Question

The jQuery UI dialog drives me up the walls. To the best of my understanding, here's how it works:

When you do $('#myDialog').dialog({...}), it copies the #myDialog element and moves it inside this bizarre widget thing at the bottom of your body tag. This is crazy! It will duplicate possibly unique DOM elements (with ids) when it does this.

So what I'm trying to do is make it behave in a predictable way when I refresh the HTML of the original element (#myDialog). If I do this dynamically, sometimes the dialog doesn't open any more:

http://jsfiddle.net/t67y7/3/

Or sometimes the dialog opens with the old HTML (because it's cached at the bottom of the page that way). What is up with this?

Answer 1

Why don't you just call $("#dialogId").dialog("destroy") on close function, like this:

$("#dialogId").dialog({
     close: function() {
         $(this).dialog("destroy");
         // you may want empty content after close if you use AJAX request to get content for dialog
         $(this).html('');
     }
}

The destroy function will remove the decorated code, and your dialog element will not be duplicate next time you show the dialog.

I added a sample code to jsfiddle.net example.