JavaScript

jQuery UI Date Picker control issue with .Net

Aye, I do whitter on about jQuery.  It’s ace.  The newly released jQuery UI is pretty special too.  One of the many great widgets is the Date Picker control.

I build many .net applications that require date entry, so I implement the Date Picker control often.  Unfortunately, there is a problem when it is used on a field that is validated using a .Net validation control.  Upon clicking on a date, I get the following error:

length is null or not an object

This only occurs when using Internet Explorer.  Currently, my only solution is to edit the source code.  Locate the following code in jquery-ui.js or ui.datepicker.js:

inst.input.trigger('change')

Replace it with:

if (!$.browser.msie){inst.input.trigger('change')}

This prevents the change event firing in IE.

I wouldn’t normally advocate changing source code in this manner, as it makes future upgrades tedious.  Hopefully it will be addressed in a future release.

24 thoughts on “jQuery UI Date Picker control issue with .Net

  1. Thanks Andrew, your code snipped helped me alot. I was heading nowhere but you really solved the problem..thanks again..:)

  2. Thanks buddy, it was really a good solution. But what is the cause of the error? I used it and got this error only on a particular scenario. If you are familiar with ASP.NET, I got this error while using RequiredFieldValidator control. When I modified the script, it didn’t appear again?

  3. Indeed the error ocurred when I used the RequiredFieldValidator control as well. I can’t remember why though, as it was some time ago.

    I’m a fairly pragamatic developer, and so I don’t worry about these things once it’s fixed!

  4. What if you have TextChanged event on the TextBox and need it fire when the date is selected? Disabling .change() for IE means that the postback won’t happen and the TextChanged handler won’t execute.

  5. This problem is caused by jQuery raising a Change event on the Input control that is handled by the ASP Net Validation WebResource client code, in which the event object supplies the Datepickers ‘Done’ button as the srcElement.

    This causes the ASP Net function ValidatorOnChange (when in IE) to mis-identify the element on which the Change event is raised and creates a null reference error due to it not gracefully handling a failure to connect the Datepickers ‘Done’ button to any Validator.

    My solution to this is to store a reference to the ValidatorOnChange function, override it with an empty function then bind the input controls onchange event to a call to the stored reference.

    This removes the error, completes the onchange event (thus allowing the validators to perform their function), and permits the asp net webresource code to be changed in framework updates without breaking applications (I’m hoping).

    It should also be applicable to all plugins that experience similar issues, and not just DatePicker.

    This is an example of my method:

    // Execute on Document ready…
    $(function() {

    // Correct for IE problem with ASP Net Validators
    // Store reference to function with problem, and over-ride it with an empty function
    WebResource_ValidatorOnChange = ValidatorOnChange;
    ValidatorOnChange = function(event) { }

    // Initialise date and time picker
    $(‘#< %= Control.ClientID %>‘).datepicker({
    configuration:options
    });

    // Bind call to Validation code to change event of Control
    $(‘#< %= Control.ClientID %>‘).bind(“change”, function(event) {
    WebResource_ValidatorOnChange(event);
    });

    });

  6. I ought point out that my solution obviously requires one to bind every control on the page that needs the onchange event for it’s validators.

    It also seems unneccesary if you can use the empty onselect function that is a suggested solution.

    But it turns out that if you use a CustomValidator that uses a server side handler for validation that the onselect function method fails, which is why I use my slightly convuluted technique to provide client side validation in concert with jquery hi datepicker.

  7. Trouble I have with this solution is that I’m using the Google CDN to deliver the jQuery js files to the client so I don’t have the option of modifying the file. The only solution was to get rid of the RequiredFieldValidator and stick with the CustomValidator I’m using to validate the date on the server side.

  8. Hola Andrew.

    Tu solución me dió luz al final del camino. El cambio lo hice en el fuente jquery-ui-timepicker-addon.js linea (815), reemplacé this.$input.trigger(“change”); por if (!$.browser.msie) { this.$input.trigger(“change”); }

    Muchas gracias por tu aporte y muchos éxitos.

Leave a Reply

Your email address will not be published.