I’m working on a dialog that loads an external page with a small 2 page form in it. Opening the dialog and using the form work fine until I get to closing the dialog. I have a button in the second page that is meant to call dialog(“close”), but it never closes the dialog.
I have this all wrapped up in a .Net user control, I had hoped it would solve the issue, but nothing seems to work. The control code is below.
I have tried some of the solutions found on here. I have tried keeping the script tags for jQuery and jQuery UI in the ASCX only, as well as the parent page and master. I have also tried the buttons option of the dialog and that did not work either.
Right now I am not getting any error, just nothing happens. If I try to do a $(“#dialog”).dialog(“close”); in the console, I get the error: “Error: cannot call methods on dialog prior to initialization; attempted to call method ‘close'”
Does anyone have any ideas what I can do to get this dialog to close properly?
<%@ 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>
Change
To