Question

我有JQuery对话框用于在表中插入新行。一切都很好。几天前，当我插入FlexiGrid for Table时，我开始遇到问题。当我插入新的行对话框消失时，但是当我打开对话框时，插入的新插入数据仍然在对话框中。

如何在完成使用后重置对话框字段。

对话框的代码是：

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

这是对话形式：

<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

检查Dialog Close事件。您需要存储对话状态，状态将包括（标题，文本等），如果您正在修改它。

<强>更新

阅读评论后，我得到了什么，根据它给出答案。如果我错了，请纠正我。

在打开dailog表单之前，将html存储到本地变量，然后在关闭之前将html设置回对话框。

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

希望这会对你有所帮助。

Answer 2

您可以使用jQuery对话框的close事件。

有关jQuery UI的更多信息。

e.g。

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

Answer 3

如果将此行添加到“保存”或“取消”功能，是否可行？

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

或更直接的方法（thx @mplungjan）：

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

它使对话框中的所有内容都消失，这是最好的方式，以便不显示最后的数据。

Answer 4

您可以通过将html属性设置为空来清除DIV中的所有html内容。

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

Answer 5

为什么不在每次打开时都在对话框中创建HTML然后执行此操作：

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

..在你完成插入新记录之后，通常是在

之后

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

干杯！

我关闭它时从JQuery对话框中删除数据

5 个答案: