jqueryuidatepickerコントロールのあるページがあります。毎日の選択で、私はajaxを使用してWebメソッドに投稿し、カレンダーコントロールの下にあるドロップダウンボックスを埋めるためにサーバー側のデータ入力を行います。
私はすでにこのコードを2ページに使用しました。最初は完璧に機能しますが、これに問題があります。最初に日付を選択すると、イベントは正常に発生し、2回目は何も起こらず、次のクリックが再び正常に機能します。そのため、イベントは、同じ日付であろうと異なる日付であろうと、1秒ごとにのみ発生します。日付の選択をキャプチャするための入力コントロールを追加しました。これは、各選択で正常に機能します。
私が今抱えているバグは、select jquery関数内にアラートを追加すると、毎回起動し、それを削除すると、この問題が再び発生することです。
ありがとう
マークアップ：
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="Site.Master" CodeBehind="calendartest.aspx.cs" Inherits="Test.calendartest" EnableEventValidation="false" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
onSelect: function(dateStr, inst) {
document.getElementById('<%= hSelectedDate.ClientID %>').value = dateStr;
var hubid = 2;
$('#<%=ddlAvailableTimes.ClientID %>').empty().append('<option selected="selected" value="0">Loading...</option>');
$.ajax
({
type: "POST",
url: "UserCP.aspx/PopulateAvailableTimeSlots",
data: ("{date:'" + dateStr + "', hubid:'" + hubid + "'}"),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnTimeSlotsPopulated
});
$("#datepicker_value").val(dateStr);
}
});
});
function OnTimeSlotsPopulated(response) {
PopulateControl(response.d, $("#<%=ddlAvailableTimes.ClientID %>"));
}
function PopulateControl(list, control) {
if (list.length > 0) {
control.removeAttr("disabled");
control.empty().append('<option selected="selected" value="0">--Select Time Slot--</option>');
$.each(list, function() {
control.append($("<option></option>").val(this['Value']).html(this['Text']));
});
}
else {
$("#<%=ddlAvailableTimes.ClientID%>").attr("disabled", "disabled");
control.empty().append('<option selected="selected" value="0">--No Slots Available--<option>');
}
}
</script>
<input id="hSelectedDate" type="hidden" value="" runat="server" />
<input id="hfHub" type="hidden" value="" runat="server" />
<table style="width: 290px" cellpadding="0" cellspacing="0"
align="center">
<tr>
<td align="center">
<div id="datepicker">
</div>
<asp:DropDownList ID="ddlAvailableTimes" runat="server" Width="192px" Enabled="false">
<asp:ListItem Text="--Select Time Slot--" Value="0"></asp:ListItem>
</asp:DropDownList>
<input id="datepicker_value" />
</td>
</tr>
</table>
</asp:Content>
サーバ側：
public partial class calendartest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static ArrayList PopulateAvailableTimeSlots(string date, string hubid)
{
ArrayList list = new ArrayList();
//Do stuff here
return list;
}
}
HTML出力：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link href="css/master.css" rel="stylesheet" type="text/css" />
<link href="themes/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="themes/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.datepicker.js"></script>
<title>Test</title>
</head>
<body>
<form name="aspnetForm" method="post" action="calendartest.aspx" id="aspnetForm">
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
onSelect: function(dateStr, inst) {
document.getElementById('ctl00_MainContent_hSelectedDate').value = dateStr;
var hubid = 2;
$('#ctl00_MainContent_ddlAvailableTimes').empty().append('<option selected="selected" value="0">Loading...</option>');
$.ajax
({
type: "POST",
url: "UserCP.aspx/PopulateAvailableTimeSlots",
data: ("{date:'" + dateStr + "', hubid:'" + hubid + "'}"),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnTimeSlotsPopulated
});
$("#datepicker_value").val(dateStr);
}
});
});
function OnTimeSlotsPopulated(response) {
PopulateControl(response.d, $("#ctl00_MainContent_ddlAvailableTimes"));
}
function PopulateControl(list, control) {
if (list.length > 0) {
control.removeAttr("disabled");
control.empty().append('<option selected="selected" value="0">--Select Time Slot--</option>');
$.each(list, function() {
control.append($("<option></option>").val(this['Value']).html(this['Text']));
});
}
else {
$("#ctl00_MainContent_ddlAvailableTimes").attr("disabled", "disabled");
control.empty().append('<option selected="selected" value="0">--No Slots Available--<option>');
}
}
</script>
<input name="ctl00$MainContent$hSelectedDate" type="hidden" id="ctl00_MainContent_hSelectedDate" />
<input name="ctl00$MainContent$hfHub" type="hidden" id="ctl00_MainContent_hfHub" />
<table style="width: 290px" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center">
<div id="datepicker">
</div>
<select name="ctl00$MainContent$ddlAvailableTimes" id="ctl00_MainContent_ddlAvailableTimes" disabled="disabled" style="width:192px;">
<option selected="selected" value="0">--Select Time Slot--</option>
</select>
<input id="datepicker_value" />
</td>
</tr>
</table>
</form>
</body>
</html>