Remove data from JQuery dialog box when I close it

Question

I have JQuery dialog box for inserting new row in table. And everything works good. Few days ago when I inserted FlexiGrid for Table started a problem for me. When I insert new

Answer 1

Would it work if you add this line to the function of Save or Cancel?

 $( "#newDialog-form" ).html("");

or more straight method (thx @mplungjan):

 $( "#newDialog-form" ).empty();

It makes that all the content inside the dialog disappear, it's the best way so that last data does not appear.

Answer 2

Check Dialog Close event. You will need to store the state of dialogue, state will include (title, text etc), if you are modifying it.

Update

After reading the comment, what I got, giving answer according to it. Please correct me if I'm wrong.

Before you open the dailog form, store the html to local variable and then before closing it set the html back to the dialogue.

var originalContent;
$("#newDialog-form").dialog({
   //Your Code, append following code
   open : function(event, ui) { 
      originalContent = $("#newDialog-form").html();
   },
   close : function(event, ui) {
      $("#newDialog-form").html(originalContent);
   }
});

Hope this helps you.

Answer 3

Why not create the HTML in dialog every time you open it and then do this:

$(this).dialog("close");
$(this).remove();

..after you're done inserting the new record, usually after

$('#yourForm').submit();

Cheers!

Answer 4

You can make use of the close event of jQuery dialogs.

More information on jQuery UI.

e.g.

$( "#newDialog-form" ).dialog({
    ...
    close : function() {
        //functionality to clear data here
    }
});

Answer 5

you can clean all html content in DIV by setting the html property to nothing.

$("#ElementId").html("");