JQuery несколько модальных диалогов

Question

Итак, у меня есть страница с несколькими модальными всплывающими окнами. У каждого есть значения, которые нужно отправить через форму обратно на страницу.

Чтобы убедиться, что каждый диалог находится внутри формы, которую я использую .parent().appendTo("#frmMain"); в конце каждого определения диалога.

Моя проблема возникает, когда объявлено более одного модального режима. Модал, у которого строка .parent().appendTo("#frmMain"); сделана последней, является единственным, которому возвращаются его значения через форму.

Код немного, но я хотел оставить как можно больше.

дополнение: у меня два модальных режима работают, а третий нет. Выделение и текстовое поле работают, а обычные - нет. Не знаю почему, любая помощь будет высоко ценится

Я поднял большую часть этого кода из примеров

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

У меня была похожая проблема, но мне нужно было добавить все модальные формы, но добавить один модальный после отправки Я создал отдельный div для каждого мода и добавил модал к соответствующему 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>

Answer 2

Итак, я нашел способ заставить работать несколько модалов каждый раз.

Как вы, возможно, знаете, модальный div перемещается за пределы тега body, и поэтому input, select, textarea не отображаются в последующем.

Так что нам нужно переместить div обратно в форму, а не делать это при объявлении диалога. Я сделал это на кнопке

поэтому код изменился на

$("#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');
    }
})