views:

292

answers:

1

Working around an issue where my jquery datepicker does not display after postback within an update panel.

The textbox (trigger) for the calendar is contained within a control, which is contained within an update panel.

I found an article assisting with this issue, and it informed me to do the following

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim tScript As String = "$(function(){ Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ShowDatePicker); });"
        Page.ClientScript.RegisterStartupScript(Me.GetType(), "async_" & Me.txtAquisition.ClientID, tScript, True)

Then on the ascx I have

<script type="text/javascript">
 function showDatePicker(sender, args) {
     var control = document.getElementById("<%=txtAquisition.ClientID %>")
     alert(control);
    $(control).each(function()
   {
      $(this).datepicker({ showOn: 'focus' });
    });
 }
 </script>

but am getting an undefined error.

Am I approaching this in the correct manner? Any other suggestions to ensure my datepicker remains usable within the update panel?

Thinking this may be due to the fact that I have the controls nested within an update panel... several of them in fact.

Any help on this is greatly appreciated.

A: 

Javascript is case sensitive, ShowDatePicker != showDatePicker. You need to match the case both places.

Also, you can shorten that function down to this:

function showDatePicker(sender, args) {
  $("#<%=txtAquisition.ClientID %>").datepicker({ showOn: 'focus' });
}
Nick Craver