0

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?

oJM86o
  • 2,108
  • 8
  • 43
  • 71

2 Answers2

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.

Community
  • 1
  • 1
thmsn
  • 1,976
  • 1
  • 18
  • 25
  • How am I using it in a wrong way? You used an ID selector `#` I used a class name selector `.`. Jquery takes both... – oJM86o Jun 25 '12 at 12:55
  • I updated my answer with what I think the real problem is though, partial postbacks and the update panel :) – thmsn Jun 25 '12 at 12:57
  • thmsn its just an empty `{}`, that couldnt cause the error. But I also think it is the update panel...but how would I handle this? – oJM86o Jun 25 '12 at 12:58
  • @oJM86o i've updated my answer with another SO post that contains a solution i've used before. – thmsn Jun 25 '12 at 13:01
  • I think this will help but once I add this to my page I get: `Uncaught ReferenceError: Sys is not defined`. – oJM86o Jun 25 '12 at 13:04
  • Let me look around in my archive, I recall running into that problem aswell. – thmsn Jun 25 '12 at 13:07
0

Make sure you bound the datepicker function to the elements on document ready

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

Since your jQuery selector is based on the Css class name, you do not need to worry about the ID generated for your input element. As long as the class name of the element is datePickerDueDate, it will work

Also make sure you have the 2 libraries loaded to your page. jQuery and jQuery UI

Shyju
  • 214,206
  • 104
  • 411
  • 497
  • It is inside document ready already. It only works if I go to the chrome developer tools console and type it in `$(document).ready(function () { $(".datePickerDueDate").datepicker({ });` and hit enter.... – oJM86o Jun 25 '12 at 12:54
  • Do you have any other script errors ? What is firebug console showing you ? – Shyju Jun 25 '12 at 12:56
  • No errors, I think though it is due to the updatepanel and partial postbacks. – oJM86o Jun 25 '12 at 12:59