Jquery Datepicker not working in ASP.NET

Question

I have looked all over to solve this issue and all suggestions I have received have not worked. This is what I'm importing:

<link href="css/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.5.1.js" type="text/javascript"></script>
<script src="js/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.datepicker.min.js" type="text/javascript"></script>

This is the Jquery and text box

<script type="text/javascript">
   $(function () {
      $('#EarliestArrivalTB').datepicker();
   });
</script>
<asp:TextBox ID="EarliestArrivalTB" runat="server"></asp:TextBox>

I got it working on my localhost but when i moved it over to the web server, it does not work. What am i doing wrong here?

I have done this so far <script type="text/javascript"> $(function () { $('#<%=EarliestArrivalTB.ClientID %>').datepicker(); }); </script> This has no worked either. I thank you all so far for your help. But I have tried these already. — Eric
– Eric, Commented May 10, 2011 at 19:17
I believe so. I got them downloaded straight from the Jquery site. The files worked on my local machine but not on the server so im assuming they are fine. — Eric
– Eric, Commented May 10, 2011 at 19:43

KP. · Accepted Answer · 2011-05-10 19:11:56Z

3

The problem is you're referencing a server-side ID. You need to generate the client-side ID for the asp.net control for it to work:

<script type="text/javascript">
   $(document).ready(function() {
      $('#<%=EarliestArrivalTB.ClientID %>').datepicker();
   });
</script>

#EarliestArrivalTB as a selector on the client doesn't exist because it's clientside representation will be very different.

answered May 10, 2011 at 19:11

KP.

13.8k3 gold badges42 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hawxby · Accepted Answer · 2011-05-10 18:44:33Z

2

My favourite way of doing it

<script type="text/javascript">
   $(function () {
      $('.DatePicker').datepicker();
   });
</script>
<asp:TextBox ID="EarliestArrivalTB" runat="server" CssClass="DatePicker"></asp:TextBox>

This means implementing the datapicker on any field is no more complicated that adding a DatePicker class.

Edit: I suppose I should tell you why its not working too. The Id you specify on a server control is the Id you use to reference in server side code. Once its put on the page because of naming containers and such its client Id will be different to make sure there are no naming conflicts, as a result there is the ClientID property so you can discover what that client side Id actually is.

answered May 10, 2011 at 18:44

Hawxby

2,8041 gold badge24 silver badges30 bronze badges

7 Comments

Eric Over a year ago

I tried that class thing before to no success. I tried again and failed. I understand the issue and I even used the rendered id that came from the web page and still doesn't work. Thank you for the input though

Hawxby Over a year ago

Is this all browsers? What other libraries are you using? Have you looked at the javascript console to check for errors?

Eric Over a year ago

All browsers, Im not using any other libraries on this page. The only errors im getting is "Object doesnt support this property or method" and points to line 295 which is this line: $(function () {

Hawxby Over a year ago

Thats strange. Ok, how about changing it to this jQuery(document).ready(function() {

Eric Over a year ago

Sorry i cant format the code in the comments but this is what i have: $(document).ready(function() { $('#<%=EarliestArrivalTB.ClientID %>').datepicker(); }); This still didnt work and I think you understand now why this is baffling me. lol

|

Bala R · Accepted Answer · 2011-05-10 19:24:55Z

0

try

<script type="text/javascript">
   $(function () {
      $('#<%=EarliestArrivalTB.ClientID %>').datepicker();
   });
</script>

edited May 10, 2011 at 19:24

answered May 10, 2011 at 18:35

Bala R

109k23 gold badges203 silver badges212 bronze badges

3 Comments

Eric Over a year ago

Eric Over a year ago

Also tried the edited version and is pulling the correct ID but the Jquery is still not working.

Bala R Over a year ago

see if you can download the script from your web server by doing http://mysite/js/jquery-1.5.1.js

Collectives™ on Stack Overflow

Jquery Datepicker not working in ASP.NET

3 Answers 3

Comments

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related