0

我有一个带有 jqueryui datepicker 控件的页面。在每天的选择中，我使用 ajax 发布到一个 web 方法来进行一些服务器端数据填充，以填充日历控件下方的下拉框。

我已经在两页上使用了这段代码，第一次工作完美，但这个代码有问题。我第一次选择日期时，事件触发正常，第二次没有任何反应，然后下一次点击再次正常工作。因此，该事件仅在每第二次点击时触发，无论是同一日期还是不同日期。我添加了一个输入控件来捕获日期选择，它适用于每个选择。

现在让我烦恼的是，如果我在我的 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>
4

0 回答 0