CODEWITHSUNDEEP
javascriptjqueryasp.netjquery-ui
Cyberherbalist
Cyberherbalist

Reputation: 12319

Odd Javascript Error with ASP.NET and jQuery with Validation control

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!

Upvotes: 1

Views: 2489

Answers (1)

Steve Wellens
Steve Wellens

Reputation: 20640

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

Upvotes: 1

Related Questions