Question

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?

Answer 1

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).