Usuń dane z okna dialogowego JQuery, gdy je zamykam.

Question

Mam okno dialogowe JQuery do wstawiania nowego wiersza w tabeli. I wszystko działa dobrze. Kilka dni temu, kiedy wstawiłem FlexiGrid for Table, zaczął się dla mnie problem. Kiedy wstawię nowe okno dialogowe, zniknie z ekranu, ale kiedy otworzę okno dialogowe dla nowych wstawionych danych, które są wstawione wcześniej, to nadal jest w oknie dialogowym.

Jak zresetować pola dialogowe po zakończeniu z jego użyciem.

Kod do okna to:

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

Jest to forma dialogowe:

<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

Sprawdź wydarzenie Dialog Close. Będziesz musiał zachować stan dialogu, stan będzie zawierał (tytuł, tekst itp.), Jeśli modyfikujesz go.

Aktualizacja

Po przeczytaniu komentarza, co mam, dając odpowiedź zgodnie z nim. Proszę popraw mnie jeżeli się mylę.

Zanim otworzysz formularz, zapisz html na zmiennej lokalnej, a następnie przed zamknięciem ustaw html z powrotem na dialog.

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); 
    } 
}); 

Mam nadzieję, że to pomoże.

Answer 2

Można skorzystać z imprezy close dialogów jQuery.

Więcej informacji na temat jQuery UI.

np.

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

Answer 3

Czy to zadziała, jeśli dodasz tę linię do funkcji Zapisz lub Anuluj?

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

lub więcej metoda prosta (thx @mplungjan):

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

To sprawia, że ​​cała zawartość wewnątrz okna znikają, to jest najlepszy sposób, tak, że w ubiegłym dane nie pojawia.

Answer 4

możesz wyczyścić wszystkie treści HTML w DIV, ustawiając właściwość HTML na zero.

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

Answer 5

Dlaczego nie stworzyć HTML w oknie przy każdym otwarciu go, a następnie wykonaj następujące czynności:

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

..after skończysz wstawienie nowego rekordu, zwykle po

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

Pozdrawiam!