jquery ui datepicker doesn't disappear in IE7

问题:

Got the jQuery UI datepicker plugin working wonderfully, however, when using IE7, the calendar doesn't fade away after you make a selection like it does in FF, Safari, etc.

Here's the URL http://www.mchenry.edu/insideApp/OIRPprojectrequest/oirpprojectrequestform.aspx

I hope it's something silly, 'cuz IE7 is the only browser I need to support for internal clients.

Thnx!

EDIT: Try this URL, http://www.mchenry.edu/test/oirpprojectrequestform.aspx

Sorry 'bout that!

回答1:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Timestamp: Mon, 21 Sep 2009 18:50:51 UTC

Message: 'length' is null or not an object Line: 139 Char: 17 Code: 0 URI: http://www.mchenry.edu/aspnet_client/system_web/1_1_4322/WebUIValidation.js

event.srcElement.Validators is undefined when i step through with IE8. Do you mean to be accessing Validators on the DispHTMLAnchorElement?

回答2:

If you have something like this in your datepicker setup:

onSelect: function(){ this.focus(); } onClose: function(){ this.focus(); }

This causes the element to be given focus, and thus validated by the validator plugin.

Unfortunately, in IE7, this causes a bug as the focus event is called twice and the datepicker gets confused and pops up again.

The solution is not to call the validator explicitly on the element, then move the focus to the next element for IE to preserve the tab order.

                onSelect: function () {
                    var elementCounter, input, form;
                    input = $(this);
                    form = input.parents('form:first');

                    // validate the selected date
                    form.validate().element(this);

                    if ($.browser.msie && $.browser.version < 8) {
                       // MSIE 7 triggers focus event twice, forcing the datepicker to re-open
                       // to get around this, we move the focus to the next form element

                       for (var elementCounter = 0; elementCounter < form[0].elements.length; elementCounter++){
                           if (form[0].elements[elementCounter].name == input.attr('name')) {
                               $(form[0].elements[elementCounter+1]).focus();
                               break;
                           }
                       }
                    } else {
                       // give focus back to the input element to preserve tabbing
                       $(this).trigger('focus');
                    }
                },
                onClose: function () {

                    // validate the selected date
                    $(this).parents('form:first').validate().element(this);

                }

回答3:

If you specify the tabindex attribute on your input fields, then this might work well for you:

onClose: function() {
    $('input[tabindex="' + ($(this).attr('tabindex') + 1) + '"]').focus();
}