过去几天我一直在研究单页应用程序。我面临的问题之一与 JQuery 对话框有关。我想在 JQuery 对话框中显示我的表单。有几个不同的屏幕,每个屏幕都有不同的形式。用户将单击“添加”或“编辑”按钮。我正在传递 div id,该内容应该出现在对话框中。每个div都有唯一的id,每个div内部都有不同的形式。这是我创建 JQuery 对话框的代码:
JQuery 对话框:
var dialogDiv;
$.extend({
alert: function (message, title, height, width, print) {
var dialogButtons = {
"Ok": function() {
message.hide();
$(this).dialog("close");
}
};
if (print) dialogButtons.Print = function() {
$(this).dialog().printArea();
};
if (!dialogDiv) {
dialogDiv = $("<div>");
}
dialogDiv.dialog( {
buttons: dialogButtons,
resizable: false,
title: title,
modal: true,
width: height,
height: width,
overflow:"auto",
position: {
my: "center",
at: "center",
of: window
}
}).html(message);
}
});
这是我的不同形式的 div 容器的示例:
//Form 1
<div id="myForm1" class="frmLayout">
<form name="frmUser" id="frmUser" method="POST" action="#">
<fieldset>
<legend>User Info</legend>
<div class="formItem">
<span class="required" style="color:red;"><b>Required Fields</b></span>
</div>
<div class="formItem">
<label for="last_name" class="required">Last Name:</label>
<input type="text" name="ur_lname" id="ur_lname" value="" size="20" maxlength="30" />
</div>
<div class="formItem">
<label for="first_name" class="required">First Name:</label>
<input type="text" name="ur_fname" id="ur_fname" value="" size="20" maxlength="30" />
</div>
<div class="formItem">
<label for="dob" class="required">DOB:</label>
<input type="text" name="ur_dob" id="ur_dob" value="" size="10" maxlength="10" />
</div>
<div class="formItem">
<p align="center"><input type="button" name="urSubmit" id="urSubmit" value="Submit"></p>
</div>
</fieldset>
</form>
</div>
//Form 2
<div id="myForm2" class="frmLayout">
<form name="frmVehicle" id="frmVehicle" method="POST" action="#">
<fieldset>
<legend>Vehicle Info</legend>
<div class="formItem">
<span class="required" style="color:red;"><b>Required Fields</b></span>
</div>
<div class="formItem">
<label for="name" class="required">Name:</label>
<input type="text" name="ur_name" id="ur_name" value="" size="20" maxlength="30" />
</div>
<div class="formItem">
<label for="model" class="required">Model:</label>
<input type="text" name="ur_model" id="ur_model" value="" size="20" maxlength="30" />
</div>
<div class="formItem">
<p align="center"><input type="button" name="urSubmitV" id="urSubmitV" value="Submit"></p>
</div>
</fieldset>
</form>
</div>
...表格 3 和表格 4 类似。
用户访问主页后,所有 HTML 内容都会加载并设置为 display:none
。以下是如何在对话框中显示此内容的示例:
$('input[name="my button name"]').on('click', function formSubmit(){
var tabID = $('#tabID').val(); //each tab on my home page has unique id. Current tab value is set to hidden field.
var divID = $('#'+tabID+'Form'); //This line of code will select correct form
$.alert(divID.show(),'Form Input',800,600); //here I show the content
});
此代码的问题是,一旦关闭对话框,divID 内容就会从页面中删除。例如,我将单击第一个选项卡上的“添加”按钮。表格 1 将显示在对话框中。一旦我转到选项卡 2 并单击并显示 Form 2,然后返回选项卡 1 并尝试单击“添加”按钮,我将在 JQuery 对话框中看到空白页。由于某种原因,以前的内容已从页面中删除。 我想知道如何解决这个问题以及最好的解决方案是什么?在 JQuery 对话框中显示之前,我应该如何制作 HTML 内容的副本,还是有更好的方法来做到这一点?如果有人可以提供帮助或提供任何示例,请告诉我。
谢谢。
最佳答案
所以问题是你每次都会生成模态...... 我会这样做:
var dialogDiv;
$.extend({
alert: function (message, title, height, width, print, clone) {
var dialogButtons = {
"Ok": function() {
message.hide();
$(this).dialog("close");
}
};
if (print) dialogButtons.Print = function() {
$(this).dialog().printArea();
};
if (!dialogDiv) {
dialogDiv = $("<div>");
}
if(clone){
dialogDiv = $("body").append(dialogDiv);
}
dialogDiv.dialog( {
buttons: dialogButtons,
resizable: false,
title: title,
modal: true,
width: height,
height: width,
overflow:"auto",
position: {
my: "center",
at: "center",
of: window
}
}).html(message);
}
});
我注意到 UI 对话框适用于页面中已有的 DIV。 但您不是传递现有元素,而是创建一个元素。 在我看来,这就是你丢失内容的原因。 使用“clone”参数,您可以传递 true/false 来决定是否要在正文中附加新的 div。 所以将来会可用。
关于javascript - JQuery 对话框显示 HTML 内容并防止在对话框关闭后删除 HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44528499/