Jquery datepicker - only every second click event fires
<p>I have a page with a jqueryui datepicker control.
On each day selection, I post with ajax to a web method to do some server side data population to fill the drop down box which is beneath the calendar control.</p>

<p>I used this code for two pages already, first works perfect, but am having issues with this one.
The first time I select a date, the event fires fine, second time nothing happens, then the next click works fine again. So the event only fires on every second click, be it the same date or a different date.
I added an  input control to capture date selection, which works fine on each select.</p>

<p>What bugs me now is, If I add an alert inside my select jquery function, it fires every time, take it out and I have this issue again.</p>

<p>Thanks</p>

<p>Markup:</p>

<pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="Site.Master" CodeBehind="calendartest.aspx.cs"  Inherits="Test.calendartest" EnableEventValidation="false" %&gt;

&lt;asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"&gt;
&lt;/asp:Content&gt;
&lt;asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"&gt;
    &lt;script type="text/javascript"&gt;
        $(function() {
            $('#datepicker').datepicker({
                onSelect: function(dateStr, inst) {

                    document.getElementById('&lt;%= hSelectedDate.ClientID %&gt;').value = dateStr;
                    var hubid = 2; 

                    $('#&lt;%=ddlAvailableTimes.ClientID %&gt;').empty().append('&lt;option selected="selected" value="0"&gt;Loading...&lt;/option&gt;');

                    $.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, $("#&lt;%=ddlAvailableTimes.ClientID %&gt;"));
        }

        function PopulateControl(list, control) {
            if (list.length &gt; 0) {
                control.removeAttr("disabled");
                control.empty().append('&lt;option selected="selected" value="0"&gt;--Select Time Slot--&lt;/option&gt;');
                $.each(list, function() {
                    control.append($("&lt;option&gt;&lt;/option&gt;").val(this['Value']).html(this['Text']));
                });
            }
            else {
                $("#&lt;%=ddlAvailableTimes.ClientID%&gt;").attr("disabled", "disabled");
                control.empty().append('&lt;option selected="selected" value="0"&gt;--No Slots Available--&lt;option&gt;');
            }
        }
    &lt;/script&gt;

    &lt;input id="hSelectedDate" type="hidden" value="" runat="server" /&gt;
    &lt;input id="hfHub" type="hidden" value="" runat="server" /&gt;
    &lt;table style="width: 290px" cellpadding="0" cellspacing="0" 
        align="center"&gt;
        &lt;tr&gt;
            &lt;td align="center"&gt;
                &lt;div id="datepicker"&gt;
                &lt;/div&gt;
                &lt;asp:DropDownList ID="ddlAvailableTimes" runat="server"  Width="192px" Enabled="false"&gt;
                    &lt;asp:ListItem Text="--Select Time Slot--" Value="0"&gt;&lt;/asp:ListItem&gt;
                &lt;/asp:DropDownList&gt;             
                    &lt;input id="datepicker_value" /&gt;
            &lt;/td&gt;
        &lt;/tr&gt;       
    &lt;/table&gt;
&lt;/asp:Content&gt;
</code></pre>

<p>Server Side:</p>

<pre><code>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;
    }
  }
</code></pre>

<p>HTML Output:</p>

<pre><code>        &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
    &lt;meta http-equiv="Cache-Control" content="no-cache" /&gt;
    &lt;meta http-equiv="Pragma" content="no-cache" /&gt;
    &lt;meta http-equiv="Expires" content="0" /&gt;
    &lt;link href="css/master.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="themes/jquery.ui.all.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="themes/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" /&gt;

    &lt;script type="text/javascript" src="/Scripts/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/Scripts/jquery-ui-1.8.20.custom.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/Scripts/jquery.ui.core.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/Scripts/jquery.ui.datepicker.js"&gt;&lt;/script&gt;
    &lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;form name="aspnetForm" method="post" action="calendartest.aspx" id="aspnetForm"&gt;
    &lt;script type="text/javascript"&gt;
        $(function() {
            $('#datepicker').datepicker({
                onSelect: function(dateStr, inst) {
                    document.getElementById('ctl00_MainContent_hSelectedDate').value = dateStr;
                    var hubid = 2; 
                    $('#ctl00_MainContent_ddlAvailableTimes').empty().append('&lt;option selected="selected" value="0"&gt;Loading...&lt;/option&gt;');

                    $.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 &gt; 0) {
                control.removeAttr("disabled");
                control.empty().append('&lt;option selected="selected" value="0"&gt;--Select Time Slot--&lt;/option&gt;');
                $.each(list, function() {
                    control.append($("&lt;option&gt;&lt;/option&gt;").val(this['Value']).html(this['Text']));
                });
            }
            else {
                $("#ctl00_MainContent_ddlAvailableTimes").attr("disabled", "disabled");

                control.empty().append('&lt;option selected="selected" value="0"&gt;--No Slots Available--&lt;option&gt;');
            }
        }
    &lt;/script&gt;

    &lt;input name="ctl00$MainContent$hSelectedDate" type="hidden" id="ctl00_MainContent_hSelectedDate" /&gt;
    &lt;input name="ctl00$MainContent$hfHub" type="hidden" id="ctl00_MainContent_hfHub" /&gt;

    &lt;table style="width: 290px" cellpadding="0" cellspacing="0" align="center"&gt;
        &lt;tr&gt;
            &lt;td align="center"&gt;
                &lt;div id="datepicker"&gt;
                &lt;/div&gt;
                &lt;select name="ctl00$MainContent$ddlAvailableTimes" id="ctl00_MainContent_ddlAvailableTimes" disabled="disabled" style="width:192px;"&gt;
                &lt;option selected="selected" value="0"&gt;--Select Time Slot--&lt;/option&gt;
                &lt;/select&gt;             
                    &lt;input id="datepicker_value" /&gt;
            &lt;/td&gt;
        &lt;/tr&gt;       
    &lt;/table&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
