1

I am getting a mysterious (to me) javascript error when I activate the jQuery-UI script that generates the DatePicker. It works, if I am in Visual Studio and tell it to ignore the error. The selected date is generated and tossed into the text box as desired. But why this error? It only happens when there is a validation error present and involved.

OK, here is the code. First the asp.net page markup:

<asp:TextBox ID="PickerDateTextBox" runat="server" Width="100" ></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
    ErrorMessage="This is required"
    ControlToValidate="PickerDateTextBox"
    >
</asp:RequiredFieldValidator>

Here's the jQuery:

<script type="text/javascript">
    $(document).ready(function () {
        $("#PickerDateTextBox").datepicker({
        showOn: "button",
        buttonImage: "images/picker.gif",
        buttonImageOnly: true
        });
    });
</script>

And of course the includes are:

<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/jquery-ui-1.10.2.js"></script>

Don't worry, I've gotten this even with jquery 1.9.

The error is NOT within jQuery, or jQuery-UI, but in Microsoft's javascript, here:

var vals;
if (typeof(targetedControl.Validators) != "undefined") {
    vals = targetedControl.Validators;
}
else {
    if (targetedControl.tagName.toLowerCase() == "label") {
        targetedControl = document.getElementById(targetedControl.htmlFor);
        vals = targetedControl.Validators;
    }
}
var i;
for (i = 0; i < vals.length; i++) {
    ValidatorValidate(vals[i], null, event);
}
ValidatorUpdateIsValid();

The error is thrown on the line where "i < vals.length;" occurs, and the error is:

Unhandled exception at line 172, column 17 in http://localhost...blah blah blah
0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'length': object is null or undefined

Again, this doesn't happen if I do NOT have a validation control there (any kind).

Any ideas what is happening and how I can fix it?

Edited to Add:

As @Steve-Wellens points out, when running on .NET 4.5 and jQuery 1.9.1 it runs OK. Also on .NET 4.0. Unfortunately I need it to work on .NET 3.5 due to server limitations (our web servers are Windows 2003, upon which .NET 4.5 cannot be installed. I guess I could set the app to run .NET 4.0, but @Steve-Wellens has delivered the work-around so it's good to go as-is!

Cyberherbalist
  • 12,061
  • 17
  • 83
  • 121
  • It seems to work with .NET 4.5, jQuery 1.9 and IE 10. – Steve Wellens Apr 18 '13 at 20:42
  • OK, maybe I've got some kind of versioning problem going on. I see VS2012 now has Update 2. Will update that, make sure jQuery 1.9 is going on correctly. Although this is for a product that due to server version cannot deploy in .NET 4.5. I need it to work in .NET 3.5. – Cyberherbalist Apr 18 '13 at 21:06
  • I targeted .NET 3.5 and reproduced the problem...but I get the error when I select a date in the date picker. – Steve Wellens Apr 18 '13 at 22:20
  • Yes, that's where I get it, when I click on the image. – Cyberherbalist Apr 18 '13 at 22:33
  • I can see in the script it thinks the targetedControl is the hyperlink (from the calendar) which of course has no Validators and hence the exception. – Steve Wellens Apr 19 '13 at 01:44

1 Answers1

1

Here's the fix/hack/kludge (add an empty onSelect handler):

$("#PickerDateTextBox").datepicker({
    showOn: "button",
    onSelect: function() {},
    buttonImage: "images/picker.gif",
    buttonImageOnly: true
});

And explanation: Jquery datepicker popup not closing on select date in IE8

Community
  • 1
  • 1
Steve Wellens
  • 20,506
  • 2
  • 28
  • 69