Question

Here is the issue, i am running a complete ajax webapp with jquery plugins but i am having trouble reinitializing once i close the dialog.

function edit()
{
$("#dialog").dialog({
    modal: true,
    resizable: false,
    autoOpen: false,
    buttons: {
        'Save' : function(){
                // Some function here.
        },
        'Close' : function(){
            $("#dialog").dialog('destroy');
        }
    }
});
}

The dialog is invoked by a button and all it does is call the above function edit()

I have tried these methods:

Scenario 1:

I click the button do the edit and in between i decide to close the popup using the close button (not the x button on top), the dialog closes.When i click the button again the dialog opens but now when i try to close i have to click twice because two instances of dialog are running apparently.

Scenario 2:

When i figured out that to avoid two instances i have to use

$("#dialog").dialog('close').remove(); 

instead of

$("#dialog").dialog('close');

This solved the multiple instance issue but now i can’t open the dialog unless i refresh the page, any ideas on how to solve?

Answer 1

In this you remove the element with the id dialog:

$("#dialog").dialog('close').remove(); 

You should make sure in your edit function that #dialog exists before you call .dialog() on it. For example:

if( ! $('#dialog').length ) {
     $('body').append('<div id="dialog"></div>');
}