在IE8中的选择日期,Jquery datepicker弹出窗口没有关闭

Question

我有一个带有开始日期字段的Web表单.我已将jquery datepicker绑定到txt字段.现在,当我在FF中选择日期时,将在文本框中填充所选日期,并关闭日历弹出窗口.但是,当我在IE8中执行相同操作时,所选日期将填充在文本框中,但弹出窗口仍保持打开状态.我还注意到,一旦在弹出日历中选择了一个日期,就会生成脚本错误.

我正在使用jquery 1.3.2,jquery-ui 1.7.2和.NET 3.5.这是我的代码示例:

<script type="text/javascript">
  $(document).ready(function() {
    $("#<%=txtStartDate.ClientID%>").datepicker({
      changeMonth: true,
      changeYear: true,
      showButtonPanel: true,
      showOn: 'button',
      buttonImage: '/_layouts/images/CALENDAR.GIF',
      buttonImageOnly: true
    });
  });
</script>
<div id="stylized">
  <asp:ValidationSummary ID="vs" runat="server" CssClass="messages-error" HeaderText=" Action required before the form can be submitted." ForeColor="" ValidationGroup="sh" />
  <div class="formrow">
    <div class="ms-formlabel formlabel">
      <asp:Label ID="lblStartDate" runat="server" CssClass="ms-standardheader" AssociatedControlID="txtStartDate">Start Date:</asp:Label>
    </div>
    <div class="ms-formbody formfield">
      <asp:RequiredFieldValidator ID="reqStartDate" runat="server" ControlToValidate="txtStartDate" ErrorMessage="Start Date is a required field." Text="*" Display="Dynamic" ValidationGroup="sh"></asp:RequiredFieldValidator>
      <asp:CompareValidator ID="cvStartDate" runat="server" ControlToValidate="txtStartDate" ErrorMessage="Date must be in the format MM/DD/YYYY" Text="*" Display="Dynamic" ValidationGroup="sh" Operator="DataTypeCheck" Type="Date"></asp:CompareValidator>
      <asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>
      <span class="formMessage">ex. MM/DD/YYYY</span>
    </div>
  </div>
  <div id="buttonrow">
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="ms-ButtonHeightWidth" OnClick="Submit_Click" ValidationGroup="sh" />
    <asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="ms-ButtonHeightWidth" OnClick="Cancel_Click" CausesValidation="false" />
  </div>
</div>

这是我选择日期时在IE中遇到的脚本错误:

'length'为null或不是对象

WebResource.axd的

这是抛出错误的代码:

function ValidatorOnChange(event) {
  if (!event) {
    event = window.event;
  }
  Page_InvalidControlToBeFocused = null;
  var targetedControl;
  if ((typeof(event.srcElement) != "undefined") && (event.srcElement != null)) {
    targetedControl = event.srcElement;
  }
  else {
    targetedControl = event.target;
  }
  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();
}

它发生在最后的for循环中的.length上.Vals为null,在之前的if/else中找不到.我已经逐步完成了javascript和if(typeof(targetedControl.Validators)!="undefined")返回false,然后if(targetedControl.tagName.toLowerCase()=="label")也返回false.因此长度为null或不是对象错误.

现在我不确定日期选择器弹出窗口是否在IE中关闭,而WebResources.axd文件中的脚本错误是否是相关错误,但我倾向于这样.谁能告诉我为什么弹出窗口没有关闭？

Answer 1

在选择日期时,datepicker会触发INPUT元素上的change事件,但ASP.Net验证器会选择click事件,并使用source A元素,并尝试在该A元素上找到验证器,而不是INPUT.通过检查event.srcElement验证器的ValidatorOnChange功能可以观察到这一点.在IE以外的浏览器中,event.type是'change'而event.target是正确的INPUT.

虽然no-op函数onSelect: function() { }可以防止错误,但是通过将.change()内置函数覆盖为datepicker的默认值onSelect,它也会阻止验证程序触发.以下是两者的解决方法:

onSelect: function() {
  this.fireEvent && this.fireEvent('onchange') || $(this).change();
}

这使用普通.change()触发器,除了在IE上,需要使用它.fireEvent来使事件对象与更改而不是单击相关联.

Answer 2

它似乎是一种错误,但在datepicker声明中添加这一行应解决它:

onSelect: function() {}