小さな 2 ページのフォームを含む外部ページをロードするダイアログに取り組んでいます。ダイアログを開いてフォームを使用すると、ダイアログを閉じるまで問題なく動作します。2 番目のページに、dialog("close") を呼び出すためのボタンがありますが、ダイアログが閉じません。
これをすべて.Netユーザーコントロールにまとめました。問題が解決することを望んでいましたが、何も機能していないようです。制御コードは以下です。
ここにあるいくつかの解決策を試しました。親ページとマスターだけでなく、ASCX のみに jQuery と jQuery UI のスクリプト タグを保持しようとしました。ダイアログのボタンオプションも試しましたが、どちらも機能しませんでした。
現在、エラーは発生していません。何も起こりません。$("#dialog").dialog("close"); を実行しようとすると コンソールで、「エラー: 初期化前にダイアログでメソッドを呼び出せません。メソッド '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>