jQuery multiple modal dialogs

Question

Hi all,

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

<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




});

Answer 1

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');
    }
})

Answer 2

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.

<script type="text/javascript">
$(document).ready(function() {
  $("#wdDialog").dialog({
    autoOpen: false,
    buttons: {
      "Back": function() {
        $(this).dialog("close");
      },
      "Continue": function() {
        $(this).dialog("close");
      }
    }
  }).parent().appendTo($("#wd"));

  $("#pdDialog").dialog({
    autoOpen: false,
    buttons: {
      "Back": function() {
        $(this).dialog("close");
      },
      "Continue": function() {
        $(this).dialog("close");
      }
    }
  }).parent().appendTo($("#pd"));

  $("#cdDialog").dialog({
    autoOpen: false,
    buttons: {
      "Back": function() {
        $(this).dialog("close");
      },
      "Continue": function() {
        $(this).dialog("close");
      }
    }
  }).parent().appendTo($("#cd"));
});
</script>
<form id="actionForm">
<div id="wd"></div>
<div id="pd"></div>
<div id="cd"></div>

<div id="wdDialog">
  <input type="text" name="comment" />
</div>

<div id="cdDialog">
  <input type="radio" name="interest"/>
</div>

<div id="pdDialog">
  <input type="text" name="name"/>
  <input type="button"/>
</div>

</form>