jQuery datepicker in asp:UpdatePanel

When using asp:UpdatePanel and jQuery datePicker function in the ui library, there is a need to register an event handler on the textbox/input field used to bind the datepicker in order to initialize the datepicker again.

If you are using a Custom User Control where you do not know if you have a page with update panel you can use the following method to look in the page for the update panel

VB.NET

1.   PublicShared Function FindCondtrolOfType(ByVal controls As List(Of Control), ByVal t As Type, ByVal parentControl As Control) As List(Of Control)
2.   For Each c As Control In parentControl.Controls
3.    If c.GetType().Equals(t) Then
4.     controls.Add(c)
5.    End If
6.    If c.HasControls Then
7.     controls =FindCondtrolOfType(controls, t, c)
8.    End If
9.   Next
10.   Return controls
11.  End Function

When finding UpdatePanel in you page, you will have to register an event handler for your PageRequestManager in order to notify when an async request is made and completed.

In your code behind register a startup script:

1. Dim tScript As String = "$(function(){ Sys.WebForms.PageRequestManager.getInstance().add_endRequest([Your Method to call]); });"


2.       Page.ClientScript.RegisterStartupScript(Me.GetType(), "async_" & Me.[Your Text Box Name].ClientID, tScript, True)

On your page you can have a javascript function that initilize the datepicker on load of update is complete. If you have multiple textboxes the following script will do the trick:

1.   function showDatePicker(sender, args)
2.   {
3.     $('input[id$="[your input control"]').each(function()
4.     {
5.       $(this).datepicker({ showOn: 'focus' });
6.     });
7.   }

If you have a asp:*Validator on your input textbox you will need to override the onSelect function within your datepicker:

1. onSelect: function() { 'any method/function' }

Hope this will be of any help if you are using jQuery datepicker in update panel