0
Итак, у меня есть страница, которая будет иметь несколько модальных всплывающих окон. У каждого есть значения, которые необходимо отправить через форму обратно на страницу.jQuery несколько модальных диалогов
Чтобы каждое диалоговое окно находилось в форме, я использую .parent().appendTo("#frmMain"); в конце каждого определения диалога.
Моя проблема возникает, когда объявляется более одного модального объявления. Модаль, который имеет строку .parent().appendTo("#frmMain");, выполненную последним, является единственной, которая получает свои значения, отправленные обратно через форму.
Код совсем немного, но он хотел оставить как можно больше.
дополнение: так что у меня есть два модала, а третий нет. Работа select и textarea и hte normal inout нет. Не знаю, почему, любая помощь была бы оценена
Я поднял большую часть этого кода из примеров
HTML
<div id="edit-jde-number-dialog-form" title="Edit JdeNumber" style="display:none">
<p class="validatejde"></p>
<label for="jdenumber">JdeNumber: </label>
<input type="text" name="NewJdeCustomerNumber" id ="NewJdeCustomerNumber" class="text ui-widget-content ui-corner-all" size="25"> </input>
</div>
<!-- add Item Waive reason -->
<div id="waive-incident-billing-ITEM-form" title="Reason for waiving individual item" >
<p class="validateItemWaive" style="padding:2px"></p>
<label >Select a reason for waiving: </label>
<select name="ItemWaiveReason" id="ItemWaiveReason">
<option value="reason1">Reason1</option>
<option value="reason2">Reason2</option>
</select>
</div>
<!-- Add comment -->
<div id="add-incident-billing-comment-form" title="Add a comment" style="display:none">
<p class="validatecomment" style="padding:2px"></p>
<textarea name="incidentbillingcomment" id="incidentbillingcomment" width="100%" class="text ui-widget-content ui-corner-all"></textarea>
</div>
Javascript
$(document).ready(function() {
// ------------------------------- For editing jde --------------------------------------
var jdenumber = $("#jdenumber"),
jdenumberAllFields = $([]).add(jdenumber);
$("#edit-jde-number-dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
'Change JdeNumber': function() {
var bValid = true;
jdenumberAllFields.removeClass('ui-state-error');
var jdeNo = $("#NewJdeCustomerNumber");
if (checkNotEmpty(jdeNo) == false) {
var tips = $(".validatejde");
updateTips(tips, "You must enter a jde number")
bValid = false;
}
if (bValid) {
$(this).dialog('close');
SubmitAction('UpdateJDECustomerNumber');
}
},
Cancel: function() {
$(".validatejde").text("");
$(this).dialog('close');
}
},
close: function() {
jdenumberAllFields.val('').removeClass('ui-state-error');
}
}).parent().appendTo("#frmMain"); //puts the modal in the form
$('#button-change-jde-number')
.button()
.click(function() {
$('#edit-jde-number-dialog-form').dialog('open');
});
// --------------------------- for adding a comment --------------------------------------
var incidentbillingcomment = $("#incidentbillingcomment"),
incidentbillingcommentAllFields = $([]).add(incidentbillingcomment);
$("#add-incident-billing-comment-form").dialog({
autoOpen: false,
height: 350,
width: 410,
modal: true,
buttons: {
'Add Comment': function() {
incidentbillingcommentAllFields.removeClass('ui-state-error');
var commenttext = jQuery.trim($("#incidentbillingcomment").text());
var bValid = (commenttext.length > 0);
if (bValid) {
SubmitAction('AddGeneralComment');
}
else {
var tips = $(".validatecomment");
updateTips(tips, "You cannot add an empty comment.");
}
},
Cancel: function() {
$(".validatecomment").text("");
$(this).dialog('close');
}
},
close: function() {
incidentbillingcommentAllFields.val('').removeClass('ui-state-error');
}
}).parent().appendTo("#frmMain"); //puts the modal in the form
$('#add-incident-billing-comment')
.button()
.click(function() {
$("#add-incident-billing-comment-form").dialog('open');
});
// ----------------------------- For giving a ITEM Waive reason -----------------------------------
var removalreasoncombo = $("#ItemWaiveReason"),
removalreasonAllFields = $([]).add(removalreasoncombo);
$("#waive-incident-billing-ITEM-form").dialog({
autoOpen: false,
height: 350,
width: 410,
modal: true,
buttons: {
'Waive Item': function() {
var bValid = true;
removalreasonAllFields.removeClass('ui-state-error');
var selectedreasonvalue = $("#ItemWaiveReason option:selected");
var removalreasonkey = removalreasoncombo.val();
if (checkStringNotEmpty(selectedreasonvalue) == false) {
var tips = $(".validateItemWaive");
updateTips(tips, "You must select a waive reason.")
bValid = false;
}
if (bValid) {
$(this).dialog('close');
//bag of shite, it doesn't want to find the select using normal stuff so have hacked t together. NOOOOOOOO!
$("#NewItemWaiveReason").val(removalreasonkey);
SubmitAction('WaiveIncidentBillingITEM');
}
},
Cancel: function() {
$(".validateremoval").text("");
$(this).dialog('close');
}
},
close: function() {
removalreasonAllFields.removeClass('ui-state-error');
}
}).parent().appendTo("#frmMain"); //puts the modal in the form
});