jQuery 多模式对话框

Question

所以我有一个页面会有多个模式弹出窗口。 每个都有需要通过表单发送回页面的值。

为了确保每个对话框都在我在每个对话框定义末尾使用.parent().appendTo("#frmMain"); 的表单内。

当声明了多个模式时，我的问题就出现了。最后完成.parent().appendTo("#frmMain"); 行的模态是唯一通过表单返回其值的模态。

代码有点多，但想尽可能多地留下。

补充：所以我有两个模式工作，第三个没有。 select 和 textarea 可以正常工作，而正常的 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




});

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