Question

有一个链接：

<div >
    <a href="#" class="newComment" onclick="bindAddSlots()">Add Details</a>
</div>

onclick方法：

 function bindAddSlots() {
     debugger;
     if (!CheckforLogout()) {
         return false;
     }
     ClearPopUpControls();
     var dclg;
     dclg = $("#dvSchedulingProfile").dialog(
     {
         resizable: false,
         draggable: true,
         modal: true,
         title: "ADD Details",
         width: "400",
         height: "460"
     });

     dclg.parent().appendTo(jQuery("form:first"));
}

function ClearPopUpControls() {
    debugger;
    $("#ddlVisitType").val("Select Options");
    $("#SchedulingProfileDetails_Id").val("0");
    $("#dvSchedulingProfile").find("#txtNP").val("");
    $("#dvSchedulingProfile").find("#txtNS").val("");
    $("#dvSchedulingProfile").find(".lblAnnualVisitType").hide();
    $("#dvSchedulingProfile").find(".lblNP").hide();
    $("#dvSchedulingProfile").find(".lblNS").hide();
    $("#dvSchedulingProfile").find(".lblNPNumeric").hide();
    $("#dvSchedulingProfile").find(".lblNSNumeric").hide();
    $("#SchedulingProfileDetails_Id").val("0");
}

查看代码： -

<div id="dvSchedulingProfile" style="display: none">
        @Html.ValidationSummary(true)
        <table width="100%" height="75%" class="someclass">

             <tr id="AddVisitType">
                <td  class="black_label">
                    @Html.HiddenFor(m => m.SchedulingProfileDetails.Id)
                    @Html.Label("Visit Type"):<span class="star">*</span>
                </td>
                <td  style="font-size: 12px;">
                    @Html.DropDownList("ddlVisitType", new SelectList((VisitTypeBo.LoadAll().OrderBy(x => x.VisitTypeName)), "VisitTypeName", "VisitTypeName"), new { @style = "width:250px;color:black" })
                <br/>
                </td>
            </tr>

            <tr>
                <td height="5">
                </td>
                <td style="color: Red; font-size: 12px; display: none;" class="lblAnnualVisitType"
                    align="left">
                    @Html.Label("lblAnnualVisitType", "Visit Type is required.")
                </td>
            </tr>
            <tr>
                <td height="5">
                </td>
            </tr>
            <tr>
                <td class="black_label">
                    @Html.Label("Patient Slots(NP)"):<span class="star">*</span>
                </td>
                <td style="font-size: 12px;">
                    @Html.TextBox("txtNP", null, new { @style = "width:250px;", maxlength = 11 })
                </td>
            </tr>
            <tr>
                <td height="5">
                </td>
                <td style="color: Red; font-size: 12px; display: none;" class="lblNP" align="left">
                    @Html.Label("lblNP", "NP is required.")
                </td>
                <td style="color: Red; font-size: 12px; display: none;" class="lblNPNumeric" align="left">
                    @Html.Label("lblNPNumeric", "Only Numeric values are allowed.")
                </td>
            </tr>
            <tr>
                <td class="black_label">
                    @Html.Label("Time Slots(NS)"):<span class="star">*</span>
                </td>
                <td style="font-size: 12px;">
                    @Html.TextBox("txtNS", null, new { @style = "width:250px;", maxlength = 11 })
                </td>
            </tr>
            <tr>
                <td height="5">
                </td>
                <td style="color: Red; font-size: 12px; display: none;" class="lblNS" align="left">
                    @Html.Label("lblNS", "NS is required.")
                </td>
                <td style="color: Red; font-size: 12px; display: none;" class="lblNSNumeric" align="left">
                    @Html.Label("lblNSNumeric", "Only Numeric values are allowed.")
                </td>
            </tr>
            <tr>
                <td height="5">
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td >
                    <input type="button" value="" class="save_bt" onclick="return SaveDetails()" style="margin-left:70PX;"/>
                </td>
            </tr>
        </table>
    </div>

现在的问题是当页面加载时我点击弹出窗口链接，但弹出窗口再次出现我需要刷新代码，所有浏览器的问题都是一样的。我一次又一次地调试代码，但没有错误即将到来，我完全感到困惑，所以有人PLZ帮我克服了这个问题。提前谢谢。

Answer 1

究竟需要将对话框附加到表单的第一个元素？如果你删除那一行，它应该可以正常工作我想..

因为，第一次它正常工作，因为只有一个id为dvSchedulingProfile的元素，并且在显示对话框后立即再次将相同的元素添加到表单的第一个元素，所以下次有两个具有相同id的元素，现在jquery对话框不起作用，因为它找不到具有给定id的单个元素..

Answer 2

问题在于，当我们关闭对话框时，它只是关闭，但是我们需要将其销毁，以便表单与其保持任何关联。因此，当我们关闭弹出窗口时，我们需要一些额外的代码行来决定要做什么。

var dclg=$("#dvSchedulingProfile")
     dclg.dialog(
     {
         resizable: false,
         draggable: true,
         modal: true,
         title: "ADD Details",
         width: "400",
         height: "460",
         close: function () {
          dclg.dialog("destroy");
          dclg.hide();
          }
     });

弹出窗口无法正确加载。它每次都需要页面刷新

2 个答案: