JQuery multiple modal dialogs?

So I figured out a way to get multiple modals to work everytime.

Up vote 0 down vote favorite share g+ share fb share tw.

So I have a page that is gonna have multiple modal popups. Each one has values that need to be sent via a form back to the page. To ensure that each dialog is within the form I am using .parent().

AppendTo("#frmMain"); on the end of each dialog definition. My problem comes when there are more than one modal declared. The modal that has the line .parent().

AppendTo("#frmMain"); done last is the only one that gets its values sent back via the form. Code is quite a bit but have wanted to leave as much of it as possible. Addition: so I've got two of the modals working and the third isn't.

The select and textarea work and hte normal inout don't. No idea why, any help would be much appreciated I have lifted most of this code from the examples HTML JdeNumber: Select a reason for waiving: Reason1 Reason2 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 }); jquery-ui forms modal-dialog link|improve this question edited Sep 20 '10 at 12:02 asked Sep 20 '10 at 5:29Amjid Qureshi1438 87% accept rate.

So I figured out a way to get multiple modals to work everytime. As you may be aware the modal div gets moved to outside the body tag and that is why the input, select, textarea does not appear itneh form post back. So we need to move the div back in the form, rather than doign this on teh declaration of the dialog I did it on the button so the code changed to $("#edit-jde-number-dialog-form").

Dialog({ autoOpen: false, height: 250, width: 350, modal: true, buttons: { 'Change JdeNumber': function () { var bValid = true; jdenumberAllFields. RemoveClass('ui-state-error'); var jdeNo = $("#JdeCustomerNumber"); if (checkNotEmpty(jdeNo) == false) { var tips = $(". Validatejde"); updateTips(tips, "You must enter a jde number") bValid = false; } if (bValid) { $(this).

Dialog('close'); //******************************************* $(this).parent(). AppendTo("#frmMain"); //puts the modal back in the form //******************************************* SubmitAction('UpdateJDECustomerNumber'); } }, Cancel: function () { $(". Validatejde").

Text(""); $(this). Dialog('close'); } }, close: function () { jdenumberAllFields. Val('').

RemoveClass('ui-state-error'); } }).

I had a similar issue but I needed to append all modals to the form but just append one modal on submit. I created a separate div for each modal and appended the modal to the appropriate div.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.