Removing data from jQuery dialog when closing

Question

I have a jQuery dialog to insert a new row into a table. And everything works well. A few days ago, when I inserted FlexiGrid for Table, I started working with the problem. When I insert a new line dialog, it disappears, but when I open a dialog for newly inserted data that was previously inserted, it is still in the dialog box.

How to reset dialog fields after I finished using this.

Code for dialogue:

$(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 the 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 the Close dialog box . You will need to save the state of the dialog, the state will include (name, text, etc.) if you change it.

Update

After reading the comment that I received, giving an answer in accordance with it. Please correct me if I am wrong.

Before opening the dailog form, save the html in a local variable, and then return the html to the dialog before closing.

 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 2

You can use the close event for jQuery dialogs.

Learn more about jQuery UI .

eg.

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

Answer 3

Will it work if you add this line to the save or cancel function?

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

or more direct method (thanks @mplungjan):

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

This means that all content inside the dialog box disappears, this is the best way to prevent the latest data from being displayed.

Answer 4

you can clear all html contents in a DIV by setting nothing for the html property.

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

Answer 5

Why not create an HTML dialog every time you open it, and then do it:

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

.. after you finish inserting a new record, usually after

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

Hooray!