ASCX中的jQuery對話框不會關閉

Question

我正在處理一個對話框，該對話框中加載一個帶有小2頁表單的外部頁面。打開對話框並使用表單工作正常，直到我關閉對話框。我在第二個頁面中有一個按鈕，用於調用對話框（「關閉」），但它從不關閉對話框。

我把這一切都包裝在.Net用戶控件中，我希望它能解決問題，但似乎沒有任何工作。控制代碼如下。

我嘗試了一些在這裏找到的解決方案。我曾嘗試僅在ASCX中保留jQuery和jQuery UI的腳本標記，以及父頁和母版。我也嘗試了對話框的按鈕選項，但也沒有工作。

現在我沒有收到任何錯誤，只是沒有任何反應。如果我試圖做一個$（「＃dialog」）。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更換。

我遇到了自引用對話框的問題。通過對元素進行全局引用，您可能會更好地訪問它。