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 row dialog dissapear but when I open dialog for new insert data that is inserted before is still in dialog.

How to reset dialog fields after I finish with it's usage.

The code for dialog is this:

$(function() {
   $( "#dialog:ui-dialog" ).dialog( "destroy" );
        $( "#newDialog-form" ).dialog({
            autoOpen: false,
            height: 250,
            width: 300,
            modal: true,
            buttons: {
                Salva: function() {
                    $.ajax({
                      url: 'agendaTipoAppuntamentoSaveJson.do',

                      type: "POST",
                      dataType: "json",
                      data: $("#newDialogForm").serialize(),
                      success: function(result) {
                          if (result.esito!='OK') {
                              alert(result.esito + ' ' + result.message);  
                          }
                          else {
                              addNewTipoAppuntamento(
                                            result.insertedTipoApp.idTipoAppuntamento , 
                                            result.insertedTipoApp.codice, 
                                            result.insertedTipoApp.descrizione, 
                                            result.insertedTipoApp.descrBreve, 
                                            result.insertedTipoApp.colore
                             );
                             $("#newTable").flexReload(); 
                             $( "#newDialog-form" ).dialog( 'close' );
                          }
                       },
                       error:function (xhr, ajaxOptions, thrownError){
                           alert(xhr.status);
                           alert(thrownError);
                       }  
                    });
                 },
                 Annula : function() {
                   $( this ).dialog( "close" );
                 }
              }
        });

        $( "#newDialog-form" ).dialog({ closeText: ''  });
 });

This is dialog form:

<div id="newDialog-form" title="Nuovo Tipo Appuntamento" class="inputForm"   >
    <form id="newDialogForm" action="agendaTipoAppuntamentoSaveJson.do"  >
    <input type="hidden" name="azione" id="idAzione" value="update"  />
    <input type="hidden" name="idTipoAppuntamento" id="idTipoAppuntamentoIns" value="-1"  />
    <fieldset>
       <table>
            <tr >
            <td>
            <label for="codiceIns">Codice </label>
            </td><td>
            <input type="text" name="codice" id="codiceIns" class="text ui-widget-content ui-corner-all"/>
            </td></tr><tr>
            <td>
            <label for="descrizioneIns">Descrizione </label>
            </td><td>
            <input type="text" name="descrizione" id="descrizioneIns" value="" class="text ui-widget-content ui-corner-all"   />
            </td></tr><tr>
            <td>
            <label for="descrBreveIns">descrBreve </label>
            </td><td>
            <input type="text" name="descrBreve" id="descrBreveIns" value="" class="text ui-widget-content ui-corner-all"  />
            </td></tr><tr>
            <td>
            <label for="coloreIns">colore </label>
            </td><td>
            <input type="text"  name="colore" id="coloreIns" value="" class="text ui-widget-content ui-corner-all"  />
            </td>
            </tr>
        </table>
    </fieldset>
    </form>
</div>

Answer 1

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 2

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

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

Answer 3

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 4

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 5

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.