jQuery-ui problem with modal dialog from ajax

Question

Hi

I have the following setup: index.html with <div id="container"></div> using anchor method I load different html content into this container.
My content contains div for modal dialog "dialog-form" and I initialise it with the custom function from the javascript included in index.html on successful ajax load using the callback

   $.get("callback.php",query, function(data){
        $("#container").html(data);
        initPos(); // here we run javascript to initialise modal dialog
    });

Everything is ok until user click other menu (we load different content) and after that again clicks menu with this modal dialog, so page loads again, we call script again (everything is ok yet), dialog opens, information from the dialog is submitted to server and on sucessful sumbit I want to close the dialog with

('#dialog-form').dialog('close');

it worked first time, but no longer works because we initialised this dialog twice and using Firebug I can see two different instances of ui dialog with the same name in the

div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"

How to clean this up when the user selects different menu item? What is the right way to do deal with this? Is there any way to close multiple dialogs with the same name?

Answer 1

Figured it out. To remove this DIVs from body - before initPos() in ajax callback insert function InitializeDialog()

function InitializeDialog() {

    $("div").remove(".ui-dialog");
    $("div").remove("#dialog-form");
}