През последните няколко дни работя върху едностранично приложение. Един от проблемите, с които се сблъсквам, е свързан с диалоговия прозорец JQuery. Бих искал да покажа формулярите си в диалоговия прозорец на JQuery. Има няколко различни екрана и всеки от тях има различна форма. Потребителят ще щракне върху бутона Добавяне или Редактиране. Предавам div id и това съдържание трябва да се появи в диалоговия прозорец. Всеки div има уникален идентификатор и всеки 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 и щракна и покажа формуляр 2, след това се върна в раздел 1 и се опитам да щракна върху бутона Добавяне, ще получа празна страница в моя диалогов прозорец JQuery. По някаква причина предишното съдържание се премахва от страницата. Чудя се как мога да заобиколя този проблем и кое е най-доброто решение? Трябва ли да направя копие на моето HTML съдържание, преди да го покажа в диалоговия прозорец на JQuery, или има по-добър начин да направя това? Ако някой може да помогне или има пример, моля да ме уведоми.
Благодаря ти.
.clone()
. - person apires   schedule 13.06.2017var divID = $('#'+tabID+'Form').clone();
. Това ли опита? - person apires   schedule 13.06.2017.dialog()
...ако трябва да изтриете диалоговия прозорец, който се затваря, трябва просто да добавитеdestroy
при събитие за затваряне. Като това. - person apires   schedule 13.06.2017