Javascript 当我关闭它时从 JQuery 对话框中删除数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8968995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove data from JQuery dialog box when I close it
提问by Akosha
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.
我有用于在表中插入新行的 JQuery 对话框。一切正常。几天前，当我插入 FlexiGrid for Table 时，我遇到了一个问题。当我插入新行对话框消失但当我打开对话框以获取之前插入的新插入数据时，它仍然在对话框中。
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>
回答by Amar Palsapure
Check Dialog Closeevent. 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.
在打开 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);
}
});
Hope this helps you.
希望这对你有帮助。
回答by tobias86
You can make use of the closeevent of jQuery dialogs.
您可以利用closejQuery 对话框的事件。
More information on jQuery UI.
有关jQuery UI 的更多信息。
e.g.
例如
$( "#newDialog-form" ).dialog({
...
close : function() {
//functionality to clear data here
}
});
回答by netadictos
Would it work if you add this line to the function of Save or Cancel?
如果将这一行添加到保存或取消功能中是否有效？
$( "#newDialog-form" ).html("");
or more straight method (thx @mplungjan):
或更直接的方法（感谢@mplungjan）：
$( "#newDialog-form" ).empty();
It makes that all the content inside the dialog disappear, it's the best way so that last data does not appear.
它使对话框中的所有内容都消失了，这是不出现最后数据的最佳方法。
回答by Raathigesh
you can clean all html content in DIV by setting the html property to nothing.
您可以通过将 html 属性设置为空来清除 DIV 中的所有 html 内容。
$("#ElementId").html("");
回答by deb_
Why not create the HTML in dialog every time you open it and then do this:
为什么不在每次打开对话框时在对话框中创建 HTML，然后执行以下操作：
$(this).dialog("close");
$(this).remove();
..after you're done inserting the new record, usually after
..插入新记录后，通常在
$('#yourForm').submit();
Cheers!
干杯!
