Export to GitHub

jquery-datepicker - issue #56

breaks .net validators


Posted on Mar 18, 2009 by Helpful Rhino

What steps will reproduce the problem? create a blank page with a TextBox and a RequiredFieldValidator on it. Apply datePicker to the textbox. Choose a date. boom!. Here is an example page: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="secure.myclient.oldmutual.co.za.statements.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml&quot; > <head runat="server"> <title></title>

&lt;link href=&quot;/shared/css/datepicker-2.1.2.css&quot; rel=&quot;stylesheet&quot; 

type="text/css" />

&lt;script src=&quot;/shared/js/jquery-1.2.6.js&quot; 

type="text/javascript"></script> <script src="/shared/js/date.js" type="text/javascript"></script> <script src="/shared/js/jquery.bgiframe-2.1.1.js" type="text/javascript"></script> <script src="/shared/js/jquery.datepicker-2.1.2.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server">

    &lt;asp:TextBox ID=&quot;TextBox1&quot; runat=&quot;server&quot; style=&quot;float: 

left"></asp:TextBox>

    &lt;br /&gt;
    &lt;br /&gt;

    &lt;asp:RequiredFieldValidator ID=&quot;RequiredFieldValidator1&quot; 

runat="server" ControlToValidate="TextBox1" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

    &lt;script type=&quot;text/javascript&quot;&gt;
        $j('#&lt;%= TextBox1.ClientID %&gt;').datePicker();
    &lt;/script&gt;


&lt;/form&gt;

</body> </html>

What is the expected output? What do you see instead? expected: textbox gets selected date. actual: javascript error: length is null or not an object

What version of the datepicker are you using? On what operating system? And Which Browser? datepicker 2.1.2 windows with ff or ie6&7 jquery 1.2.6

Please provide any additional information below. It seems to be caused by raising the change event on line 676. the validator picks up the event also and routes it to the validator javascript, which then tries to find a validator attached to a TD and bombs.

Comment #1

Posted on Mar 19, 2009 by Happy Giraffe

Thanks for the bug report. Can you please put the example on a server and send me a URL as I don't have any way of running .net code here,

Cheers,

Kelvin :)

Comment #2

Posted on Apr 5, 2009 by Happy Giraffe

Closing because of lack of response.

Comment #3

Posted on Apr 6, 2009 by Helpful Rhino

sorry :(

I found on the bug on a corporate site I've been working on and I don't have access to any servers. I have a personal site of my own I've been meaning to host the problem on, but I haven't gotten around to it yet. I'll reopen when I have a test site for you.

Comment #4

Posted on Apr 24, 2009 by Quick Camel

You should reopen this issue. I get the same thing. Using jQuery 1.2.6 and DatePicker 1.6. I have clientScript enabled in the requiredFieldValidator (RFV). When you click a date in the datePicker, you get the attached JScript error in the RFV.

Attachments

Comment #5

Posted on Apr 24, 2009 by Happy Giraffe

I'm happy to reopen the issue and try to fix it but I can't do so if I can't see the problem. I'm afraid I can't debug from a screenshot! If you can put a page displaying the problem on a server and supply a URL then I will reopen the issue and try to figure out what is going wrong,

Cheers,

Kelvin :)

Comment #6

Posted on Apr 24, 2009 by Quick Camel

So for this issue to get attention I need to...

  1. Find a new web host
  2. Purchase a new hosting plan
  3. Setup a new site
  4. Build a demo asp.net application (or copy my existing work project)
  5. Send you the URL

Then you can verify this? Is that right? I feel pretty strongly that I've given enough information to duplicate the error locally.

I'll do that again now...

  1. Create basic .Net form
  2. Put a basic Textbox control on the form
  3. In the $(document).ready block, attach the datePicker code to the tb control
  4. Add a RequiredFieldValidator (RFV) to the page, add this textbox to the required fields
  5. Enable clientside JS on the RFV
  6. Run the page
  7. Click the textbox, click a date in the datePicker
  8. See the RFV JScript error like I have attached

Many of us are working on business dev machines and on virutals with no public web sites to host error demos.

Thank you in advance for taking a look at this issue :-)

Comment #7

Posted on Apr 24, 2009 by Happy Giraffe

Hi,

I presumed as a .net developer that you had access to an internet accessible machine that is capable of hosting .net code.

I'm sure the information you have given me would allow me to duplicate the error locally IF I had a local system which was capable of running .net pages. Unfortunately I currently don't.

Possibly you can create a static set of files which demonstrates the problem by saving the generated webpage from your browser. Then you could easily upload this to some free web hosting (which doesn't require asp.net) or even attach a zip of the relevant files to this ticket.

From your screenshot it seems like there is maybe some problem with the validation code. If you follow the path you can see that vals is only set if one of the following two things is true:

  • typeof(targetedControl.Validators) != undefined or
  • targetedControl.tagName.toLowerCase() == "label"

It seems that in this situation neither of those things is true for some reason... But without seeing what .net has done to your page and what controls are there and what targetedControl is in the context of this function I don't see how I can debug.

Comment #8

Posted on Apr 26, 2009 by Helpful Camel

I got the same problem as well. This problem only appear in IE browsers. Using the screenshot on comment 4, the variable "vals" is null due to "event.srcElement" (line 156) is one of the anchor elements in datapicker instead of text input box. And this is why there are no validators attached to "targetControl". .NET assumed the "onchange" event must be originated from text input, but, in this case, it is datepicker's anchor element triggers the event.

The above is just my findings. I'm not sure this is .NET problem or datepicker's problem. Hope it helps.

Comment #9

Posted on Apr 27, 2009 by Helpful Camel

Just found a workaround for this problem. Register an empty handler for onSelect event of datepicker can avoid the problem. Hope it helps.

Comment #10

Posted on Apr 28, 2009 by Grumpy Rhino

thank you alexhokl!! i was having the same problem, i added to line below and the problem is solved. thank you again

onSelect: function() {}

Comment #11

Posted on Apr 28, 2009 by Happy Giraffe

Thanks for the workaround Alex :) So how does .NET hook up the ValidatorOnChange function? It seems to me the problem is in the .NET validator code but if there is some way I can cleanly work around it on my end I'm happy to add a little code...

Comment #12

Posted on May 27, 2009 by Happy Dog

"onSelect: function() {}"

Where should that code be added? Should it be somewhere in the jquery js files, or in my page containing the validators? If there is more code context to that line can you please provide it. Thanks

Comment #13

Posted on May 27, 2009 by Happy Dog

Comment deleted

Comment #14

Posted on May 27, 2009 by Happy Dog

Comment deleted

Comment #15

Posted on May 27, 2009 by Happy Dog

By the way Kelvin - if you still don't have a live example of this problem I can set one up for you on my site. Let me know

Comment #16

Posted on May 28, 2009 by Happy Dog

OK - I found the code over at http://groups.google.com/group/jquery-en/browse_thread/thread/a8902f2774edc05a

$(ctl).datepicker(onSelect: function() {});

where ctl is your jquery control selector statement

Comment #17

Posted on May 28, 2009 by Happy Dog

Update panel breaks jquery-ui

Now I seem to have trouble with the datepicker not 'firing' after an update panel on my page (in which my datepicker related controls are contained) does a call back.

Comment #18

Posted on May 28, 2009 by Helpful Rhino

just a shot in the dark here, but you probably have to hook up the datepicker's event handlers again after the updatepanel callback. (going by jquery's docs re ajax calls)

Comment #19

Posted on May 28, 2009 by Happy Giraffe

Hi,

It sounds like you guys are using the jQuery UI datepicker? This issues list is for support for my date picker plugin ( http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/ ). The confusion is caused because my plugin predates the UI one but they used (almost) the same name when they released theirs.

If you are using my plugin and having problems then a live example would be great,

Thanks,

Kelvin :)

Comment #20

Posted on May 29, 2009 by Happy Dog

First: Reference comments 16,17 and 18 here is the code that deals with the updatepanel / ajax postback

 function pageLoad() {
     $(document).ready(function() {
         $(".datePicker").datepicker();
     });
 }        

Second: In post 16 I may have missed a couple of {} $(ctl).datepicker({onSelect: function() {} });

Third: Apologies to Kelvin - he's right - I am using the jquery-ui datepicker and not his one - but I'm pretty sure his has the same issue with the validator control. I intend to post up a page to demonstrate the issue.

Comment #21

Posted on Jul 13, 2009 by Swift Rabbit

I was expreiencing the same issue, that solved it (Comment 20)

Comment #22

Posted on Mar 1, 2010 by Grumpy Monkey

$(ctl).datepicker(onSelect: function() {}); perfectly worked. Thanks

Comment #23

Posted on Mar 25, 2010 by Quick Elephant

Comment deleted

Comment #24

Posted on Mar 28, 2010 by Happy Giraffe

Just to clarify - it seems like you are all referring to the jQuery UI datepicker.

http://code.google.com/p/jquery-datepicker/wiki/NotTheUIDatePicker

Comment #25

Posted on Oct 1, 2013 by Quick Camel

thank you alexhokl!! i was having the same problem, i added to line below and the problem is solved. thank you again

onSelect: function() {}

Comment #26

Posted on Sep 6, 2014 by Massive Cat

I have this problem too, only thing that work is if disable clientscript on my validators in .net 4.5...

Comment #27

Posted on Jun 2, 2015 by Quick Rhino

onSelect:function(){} works fine on datepicker but does not work on timepicker

any help ?

Status: Invalid

Labels:
Type-Defect Priority-Medium