Remove data from JQuery dialog box when I close it
<p>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. </p>

<p>How to reset dialog fields after I finish with it's usage.</p>

<p>The code for dialog is this:</p>

<pre><code>$(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: ''  });
 });
</code></pre>

<p>This is dialog form:</p>

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