Reinitalize a jquery dialog

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 c开发者_如何学编程lick 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?

Remove the initialization of the dialog from the edit() function. Initialize your dialog separately, then make calls to open or close for the click handlers for each button respectively. Each time you call .dialog you're instantiating another dialog - just instantiate it once and auto hide it (which you're currently doing with autoOpen set to false) then pass open or close to dialog when you want to open or close it. See this documentation.

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>');
}

Create the dialog outside of the edit() function. Once you call dialog(), that element is turned into a dialog.

In the edit() function, you just have to use the $('#dialog').dialog('open');

edit: add data passing

$("#dialog").dialog({
    modal: true,
    resizable: false,
    autoOpen: false,
    buttons: {
        'Save' : function(){
            $('#dialog').data('param1');
            $('#dialog').data('param2');
        },
        'Close' : function(){
            $("#dialog").dialog('close');
        }
    }
});

function edit(somevalue1, somevalue2){
   $('dialog').data('param1', somevalue1);
   $('dialog').data('param2', somevalue2);
   $('dialog').dialog('open');
}

you could try to play with clone(). something like this can help:

var dialog = $("#dialog").clone()
dialog.dialog({...})

i think u should initialize that dialog with these code:

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

and then do ur edit code:

function edit(){
     $("#dialog").dialog('open');
}

hope it is useful to u~~~bless