2

On my main page I have a sort of side panel that can be opened and closed. The side panel is loaded via jQuery's load function into a div on the main page.

Part of the content that is loaded into this side panel is a div(myDialog)

When a button is clicked on in this side panel I call:

$("#myDialog").dialog({
  title : "Permission",
  width : 300,
  height : 200,
  modal : true
});

Now if I close the side panel and clear its contents with jQuery's empty function. Then I select all and 'view source' the html that jQuery added at the bottom of the body is still there. This causes problems when I reopen the side panel and try to open the same dialog because there are two of that div(with duplicate IDs).

I have tried adding this but it doesn't work:

close : function(){
    $("#myDialog").dialog("destroy");
}

How can I clear that html that jQuery adds to the bottom of the body? Or is there a better way to do what I am trying to do?

jhanifen
  • 4,441
  • 7
  • 43
  • 67
Mike
  • 2,862
  • 10
  • 42
  • 55
  • You shouldn't have multiple elements with the same ID. Fixing that might fix the problem here. – gen_Eric Dec 08 '11 at 15:30
  • I don't make the second one, jQuery does. Apparently when I call $("#myDialog").dialog({...}) it makes a copy of #myDialog and adds it to the end of the body. – Mike Dec 08 '11 at 15:32
  • 1
    jQueryUI doesn't make a copy, it actually moves that div to the end of the body, so there is still only one of them. http://jsfiddle.net/dchSr/ – gen_Eric Dec 08 '11 at 15:47
  • 1
    Well that explains a lot. So the solution would be to call $("#myDialog").remove() when the side panel closes, not when the dialog closes. Am I correct? Is there any way to make jQuery put its new version within the side panel so that I don't have to remove it manually? – Mike Dec 08 '11 at 15:52
  • 1
    Yes, that seems like it would work. Because if you close the side panel without ever opening the dialog, it would still be there. jQuery moves the div, so it's not in its original container, so `empty()` wouldn't remove it. To be safe I'd call `$('#myDialog').dialog('destroy').remove()`, to make sure the events are removed. – gen_Eric Dec 08 '11 at 15:56

5 Answers5

4

Please see this exact same post jquery: How to completely remove a dialog on close

$(this).dialog('destroy').remove()
Community
  • 1
  • 1
jhanifen
  • 4,441
  • 7
  • 43
  • 67
3

jQueryUI actually moves the div elsewhere in the DOM when a dialog is created, thus moving it out from its original container. So, if you tried to call empty() on its original container it wouldn't work.

You should remove the dialog div when the side panel is closed, not when the dialog is closed (what if the dialog was never opened).

gen_Eric
  • 223,194
  • 41
  • 299
  • 337
  • 1
    It looks like they are coming up with a better solution for this where the dialog element will get returned to its original position http://blog.jqueryui.com/2011/09/dialog-api-redesign/ – Mike Dec 08 '11 at 16:20
  • Cool, that should make problems like this easier :-) – gen_Eric Dec 08 '11 at 16:23
1

when you close dialog box then it only close the box but content will not clear.. and if you use 

$(this).dialog('destroy').remove()

method then it will remove dialog from DOM so for that you have to clear all content by your self .. or when you reopen the dialog then you have to clear all data

this is the way... try it...

Kamil Budziewski
  • 22,699
  • 14
  • 85
  • 105
user2628980
  • 11
  • 1
1

You just have to remove it from the DOM too. Try this in your close event:

$('#myDialog').dialog("destroy").remove();
Groovetrain
  • 3,315
  • 19
  • 23
  • This works great when I close the ajax loaded content and reopen it. But now it won't allow me to open the dialog more than once without closing/reopening the ajax content because it removes both the original div and the copy that jQuery made. – Mike Dec 08 '11 at 15:26
0

Does $("#myDialog").dialog("close") not work?

Also $('#myDialog').dialog("destroy").remove() should be possible.

Failing that why don't you use a Class instead of an ID. That way duplicates do not matter.

Dan
  • 1,559
  • 1
  • 15
  • 18
  • 1
    IDs are supposed to be unique. Using a class would get multiple elements, using an ID would get the one. – gen_Eric Dec 08 '11 at 15:31