Question

I’ve got an asp.net gridview inside an updatepanel.
One of the fields I have on there is a simple textbox like so:

<asp:TextBox ID="txtDueDate" Text='<%# Eval("DueDate") %>' Width="75px" runat="server" ToolTip="Select the due date." CssClass="datePickerDueDate"></asp:TextBox>

I want the jquery ui datepicker to appear when I click on this text box, I tried:

  $(".datePickerDueDate").datepicker({
            });

In chrome developer tools this textbox’s id appears as: id="MainContent_gvLineItems_txtDueDate_0"
What is the best way to handle this? My current issue is the calendar does not appear UNLESS I open developer tools and enter it directly in the console window and hit enter.

Edit

I can solve it with this:

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "setDueDate", "$(function(){$('.datePickerDueDate').datepicker('option' 'firstDay', 1);});", true);

In code behind but this appears to be ugly…is there a better way?

Answer 1

Considering you have the data in an updatepanel, the document ready event might not be fired when the update panel does a partial postback.

I imagine your cause your gridview to go into edit mode, and then your textbox appears.

jQuery $(document).ready and UpdatePanels?

That question contains a solution i’ve used before.

But basicly it means you subscribe to the updatepanels endrequest, then you rebind your .datepicker to the textboxes.