Learning jQuery

I had already posted number of post related to jQuery UI Datepicker.

1. Implement jQueryUI DatePicker with ASP.NET
2. Show Hand/Pointer cursor on image button with jQueryUI datepicker control
3. Disable Weekends in jQuery UI DatePicker
4. Enable weekends in jQuery UI Datepicker
5. Disable specific days in jQuery Datepicker

"jQuery UI Datepicker does not work after ajax partial postback". How true is it? Let's find out.

Place a script manager and an update panel on the page.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upd1" runat="server">
 <ContentTemplate>
 </ContentTemplate>
</asp:UpdatePanel>

Now place a text box and a button inside the updatepanel control.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upd1" runat="server">
 <ContentTemplate>
     <div style="font-family: Arial; font-size: small;">
        Select Date :
        <asp:TextBox ID="txtDate" runat="server"Font- Names="Arial"></asp:TextBox>
     </div>
     <asp:Button ID="btnAjax" runat="server" Text="Ajax PostBack" OnClick="btnAjax_Click" />
  </ContentTemplate>
</asp:UpdatePanel>

Now bind the datepicker control with the text box.

<script type="text/javascript" language="javascript">
$(document).ready(function(){      
    $("#<%=txtDate.ClientID %>").datepicker(
    {   changeMonth:true, 
        changeYear:true,
        showOn: 'button',
        buttonText:'Show Date',
        showAnim: 'fadeIn',
        showButtonPanel: true,
        dateFormat: 'DD, MM d, yy',
        buttonImage: 'Images/imgCalendar.png',
        buttonImageOnly: true
     }
   );
             
   $(".ui-datepicker-trigger").mouseover(function() {
        $(this).css('cursor', 'pointer');
   });
});  
<script>

Now create a server side click for the button which will cause an ajax partial postback.

protected void btnAjax_Click(object sender, EventArgs e)
{
   System.Threading.Thread.Sleep(1000);
}

Just run the page. You will see something like this.

Click on datepicker. The datepicker gets opened and selected date becomes value of the text box.
Now click on button. The server side button click gets called and now you will see something like this.

oops!!! The datepicker button is gone. So the statement is correct that "jQuery UI Datepicker does not work after ajax partial postback". So what do we do now to make it working within ajax. Well, nothing special. See below code.

<script type="text/javascript" language="javascript">
function pageLoad(sender, args)
{
  $(document).ready(function(){      
    $("#<%=txtDate.ClientID %>").datepicker(
    {   changeMonth:true, 
        changeYear:true,
        showOn: 'button',
        buttonText:'Show Date',
        showAnim: 'fadeIn',
        showButtonPanel: true,
        dateFormat: 'DD, MM d, yy',
        buttonImage: 'Images/imgCalendar.png',
        buttonImageOnly: true
     }
   );
             
   $(".ui-datepicker-trigger").mouseover(function() {
        $(this).css('cursor', 'pointer');
   });
  });  
}
</script>

pageLoad() function is available in JavaScript if you are using ASP.NET ajax. AJAX framework automatically wires up any client-side function named pageLoad() as an Application.Load handler. Visit my post for more info on "jQuery does not work properly after ajax partial postback."

Now run the page and you will be happy to see your datepicker working with ajax.

Feel free to contact me for any help related to jQuery. I will gladly help you.