ASCX中的jQuery对话框无法关闭

Question

我正在开发一个对话框，用于加载外部页面，其中包含一个小的2页表单。打开对话框并使用表单工作正常，直到我关闭对话框。我在第二页中有一个按钮，用于调用对话框（“关闭”），但它从不关闭对话框。

我把这一切都包含在一个.Net用户控件中，我曾希望它可以解决这个问题，但似乎没有任何工作。控制代码如下。

我已经尝试了一些在这里找到的解决方案。我曾尝试仅在ASCX中保留jQuery和jQuery UI的脚本标记，以及父页面和母版。我也尝试过对话框的按钮选项，但也没有用。

现在我没有收到任何错误，只是没有任何反应。如果我尝试做$（“＃dialog”）。对话框（“关闭”）;在控制台中，我收到错误：“错误：在初始化之前无法在对话框上调用方法;尝试调用方法'close'”

有没有人有什么想法可以让这个对话框正常关闭？

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SchedulerPopup.ascx.cs" Inherits="sandbox.SchedulerPopup" %>

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="Stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<style type="text/css">
.hidden { display: none; }
#header { float: left; width: 600px; }
ul { padding: 0; margin: 0; }
#dayList {
    font: normal 13px Arial;
    background-color: #EEE;
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#FAFAFA),to(#DADADA));
    background-image: -moz-linear-gradient(top,#FAFAFA,#DADADA);
    border: 1px solid #BBB;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    display: inline-block;
    zoom: 1;
    list-style: none;
    padding: 0;
    vertical-align: middle;
}
#dayList li { 
    border-top: 1px solid transparent;
    border-right: 1px solid #BBB;
    border-bottom: 1px solid transparent;
    border-left: 1px solid white;
    color: #222;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    min-width: 15px;
    padding: 0px 9px;
    margin: 0;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0px #EEE;
    }
#dayList li:first-of-type { 
    border-left: 0;
    border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    box-shadow: inset 1px 0 white;
    -webkit-box-shadow: inset 1px 0 white;
    -moz-box-shadow: inset 1px 0 #fff; 
    }
#dayList li:last-of-type {
    border-right: 0;
    border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
}
#dayList li.click {
    background-color: #787878;
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#989898),to(dimGray));
    background-image: -moz-linear-gradient(top,#989898,dimGray);
    border-color: #666;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    color: white;
    font-weight: bold;
    margin: -1px 0 -1px -1px;
    padding: 1px 9px 1px 9px;
    text-shadow: 0 1px 0px #4C4C4C;
}
#content {
    float: left;
    width: 450px;
    clear: both;
}
.input { width: 320px; }
#lblReportName { font-style: italic; }
#dayOfWeek { margin: 0; }
#dayOfMonth { height: 26px; }
#btnSubmit, #btnClose { cursor: pointer; }
</style>
<script type="text/javascript">
$(document).ready(function () {
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        width: 485,
        height: 280,
        resizable: false,
        draggable: false,
        title: "Email Scheduler",
        open: function (event, ui) {
            $(this).load("EmailSchedulerPopup.aspx")
        }
    });
    $("#popupScheduler").click(function () {
        $("#dialog").dialog("open");
    });
    $("#ddlFrequency").change(function () {
        var freq = $("#ddlFrequency").val();
        switch (freq) {
            case "once":
                $("#dayOfWeek").hide("fade", {}, 150);
                $("#dayOfMonth").hide("fade", {}, 150);
                break;
            case "daily":
                $("#dayOfWeek").hide("fade", {}, 150);
                $("#dayOfMonth").hide("fade", {}, 150);
                break;
            case "weekly":
                $("#dayOfMonth").hide("fade", {}, 150, function () {
                    $("#dayOfWeek").show("fade", {}, 300);
                });
                break;
            case "monthly":
                $("#dayOfWeek").hide("fade", {}, 150, function () {
                    $("#dayOfMonth").show("fade", {}, 300);
                });
                break;
            case "quarterly":
                $("#dayOfWeek").hide("fade", {}, 150);
                $("#dayOfMonth").hide("fade", {}, 150);
                break;
        }
    })
    $("#dayList li").click(function () {
        var interval = $(this).attr("class");
        $("#dayList li").addClass("click").not(this).removeClass("click");
        $("#txtDayInterval").val(interval);
    });
    $("#btnSubmit").click(function () {
        console.log("button clicked");
        var from = $("#txtFrom").val();
        var to = $("#txtTo").val();
        var subject = $("#txtSubject").val();
        var interval = $("#ddlFrequency").val();
        var day = $("#txtDayInterval").val();
        var data = "{ \"sFrom\" : \"" + from + "\", \"sTo\" : \"" + to + "\", \"sSubject\" : \"" + subject + "\", \"sInterval\" : \"" + interval + "\", \"iDay\" : \"" + day + "\"}";
        $.ajax({
            type: "POST",
            url: "EmailSchedulerPopup.aspx/CreateEmailSchedule",
            data: data,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success: function (msg) {
                $("#formTable").hide();
                $("#message").show();
                $("#btnClose").click(function () {
                    console.log("close button clicked");
                    $("#dialog").dialog("close");
                });
                $("#lnkCancel").click(function () {
                    console.log("close link clicked");
                    $("#dialog").dialog("close");
                });
                console.log("The call to the server side succeeded.");
            },
            error: function (x, e) {
                console.log("The call to the server side failed. " + x.responseText);
            }
        });
    });
});
</script>

<a id="popupScheduler" href="#" >clicky</a>

<div id="dialog">
<div id="wrap">
    <div id="content">
        <input id="txtDayInterval" type="hidden" runat="server" value="0" />
        <table id="formTable" runat="server">
            <tr>
                <td><label>Email Report:</label></td>
                <td><asp:Label ID="lblReportName" runat="server" CssClass="input">Gain on Sale</asp:Label></td>
            </tr>
            <tr>
                <td><label>From</label></td>
                <td><asp:TextBox ID="txtFrom" runat="server" CssClass="input"></asp:TextBox></td>
            </tr>
            <tr>
                <td><label>To</label></td>
                <td><asp:TextBox ID="txtTo" runat="server" CssClass="input"></asp:TextBox></td>
            </tr>
            <tr>
                <td><label>Subject</label></td>
                <td><asp:TextBox ID="txtSubject" runat="server" CssClass="input"></asp:TextBox></td>
            </tr>
            <tr>
                <td><label>Frequency</label></td>
                <td>
                    <asp:DropDownList ID="ddlFrequency" runat="server" >
                        <%--<asp:ListItem Value="once">Once</asp:ListItem>--%>
                        <asp:ListItem Value="daily">Daily</asp:ListItem>
                        <asp:ListItem Value="weekly">Weekly</asp:ListItem>
                        <asp:ListItem Value="monthly">Monthly</asp:ListItem>
                        <asp:ListItem Value="quarterly">Quarterly</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr id="dayOfWeek" class="hidden">
                <td><label>Day of Week</label></td>
                <td>
                    <ul id="dayList">
                        <li class="0">Sun</li>
                        <li class="1">Mon</li>
                        <li class="2">Tues</li>
                        <li class="3">Wed</li>
                        <li class="4">Thurs</li>
                        <li class="5">Fri</li>
                        <li class="6">Sat</li>
                    </ul>
                </td>
            </tr>
            <tr id="dayOfMonth" class="hidden">
                <td><label>Day of Month</label></td>
                <td>
                    <asp:DropDownList ID="ddlDayOfMonth" runat="server" >
                        <asp:ListItem Value="0">1st</asp:ListItem>
                        <asp:ListItem Value="1">2nd</asp:ListItem>
                        <asp:ListItem Value="2">3rd</asp:ListItem>
                        <asp:ListItem Value="3">4th</asp:ListItem>
                        <asp:ListItem Value="4">5th</asp:ListItem>
                        <asp:ListItem Value="5">6th</asp:ListItem>
                        <asp:ListItem Value="6">7th</asp:ListItem>
                        <asp:ListItem Value="7">8th</asp:ListItem>
                        <asp:ListItem Value="8">9th</asp:ListItem>
                        <asp:ListItem Value="9">10th</asp:ListItem>
                        <asp:ListItem Value="10">11th</asp:ListItem>
                        <asp:ListItem Value="11">12th</asp:ListItem>
                        <asp:ListItem Value="12">13th</asp:ListItem>
                        <asp:ListItem Value="13">14th</asp:ListItem>
                        <asp:ListItem Value="14">15th</asp:ListItem>
                        <asp:ListItem Value="15">16th</asp:ListItem>
                        <asp:ListItem Value="16">17th</asp:ListItem>
                        <asp:ListItem Value="17">18th</asp:ListItem>
                        <asp:ListItem Value="18">19th</asp:ListItem>
                        <asp:ListItem Value="19">20th</asp:ListItem>
                        <asp:ListItem Value="20">21st</asp:ListItem>
                        <asp:ListItem Value="21">22nd</asp:ListItem>
                        <asp:ListItem Value="22">23rd</asp:ListItem>
                        <asp:ListItem Value="23">24th</asp:ListItem>
                        <asp:ListItem Value="24">25th</asp:ListItem>
                        <asp:ListItem Value="25">26th</asp:ListItem>
                        <asp:ListItem Value="26">27th</asp:ListItem>
                        <asp:ListItem Value="27">28th</asp:ListItem>
                        <asp:ListItem Value="31">Last Day</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:HyperLink ID="btnSubmit" runat="server"><img src="Images/buttonAddSchedule.JPG" /></asp:HyperLink>
                </td>
                <td>
                    <asp:HyperLink ID="lnkCancel" runat="server" Text="cancel" NavigateUrl="#"></asp:HyperLink>
                </td>
            </tr>
        </table>
        <div id="message" runat="server" class="hidden">
            <p>
                Your email has successfully been scheduled.
            </p>
            <p>
                <asp:HyperLink ID="btnClose" runat="server"><img src="Images/buttonClose.JPG" /></asp:HyperLink>
            </p>
        </div>
    </div>
</div>

Answer 1

更改

$("#dialog").dialog("close");

到

$("#dialog").dialog("destroy");

Answer 2

请尝试以下操作，而不是关闭。

$(this).dialog('destroy');

或者尝试在对话框中添加关闭按钮。

  $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    width: 485,
    height: 280,
    resizable: false,
    draggable: false,
    title: "Email Scheduler",
    buttons: {
      "Close": function () {
          $(this).dialog('close');
      }
    },
    open: function (event, ui) {
        $(this).load("EmailSchedulerPopup.aspx")
    }
});

Answer 3

尝试添加变量以保存对脚本顶部控件的引用：

var OpenDialog = $("#dialog");

然后，在您使用$("#dialog")的每个地方，将其替换为OpenDialog。

我在使用自引用对话框时遇到过这个问题。通过对元素进行全局引用，您可以更好地访问它。