jQuery UI Dialog allows duplicate dialogs when used with dynamic content

[laxu]

Steps to reproduce:

1. You need link a#myLink that uses .load to load a file (e.g. test.html) into div#myContainer
2. test.html contains:

<script type="text/javascript">
$(document).ready(function() {
   $('#myDialog').dialog({ autoOpen:false });
});
</script>
<div id="myDialog">This is a dialog.</div>

3. Use link to load test.html into #myContainer
4. Now click link again. Now you've got two dialog elements.

The problem is that when you load the content, it creates a dialog into html body, outside the #myContainer div. Thus when you load the same content again jQuery UI thinks that the element #myDialog does not have a dialog yet. Thus you end up with dialog elements getting stacked into the body and never cleared.

A workaround is using $('#myDialog').dialog('destroy').remove() outside docready before the content is processed.

Still, since dialogs should not duplicate it seems like a bug in how the dialog is handled. Perhaps it should look first for an existing dialog in the html body and only then apply a new one?

[laxu]

Correction: The workaround is $('#myDialog','.ui-dialog').remove() inside docready

[rdworth]

When you call .dialog() on an element it will wrap the element and move the wrapper to the end of the body. This is as designed (not a bug) and is required in order to display the dialog correctly (on top) in all instances. If you have application code that isn't aware that this happens and doesn't deal well with it, your code needs to be changed to account for this behavior.