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

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.