Opened 8 years ago

Closed 8 years ago

#7601 closed bug (notabug)

jQuery UI Dialog allows duplicate dialogs when used with dynamic content

Reported by: laxu Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.dialog Version: 1.8.14
Keywords: Cc:
Blocked by: Blocking:

Description

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>
  1. Use link to load test.html into #myContainer
  2. 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?

Change History (2)

comment:1 Changed 8 years ago by laxu

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

Last edited 8 years ago by laxu (previous) (diff)

comment:2 Changed 8 years ago by rdworth

Resolution: invalid
Status: newclosed

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.

Note: See TracTickets for help on using tickets.