control.clientid 导致 javascript 错误 "cannot read click property of null"

Question

我正在为我的下拉字段之一使用 telerik 自动完成框。当用户按下回车键时，telerik 自动完成框旨在关闭下拉菜单。我的目标是当用户按下回车键时，将单击 btnServicesSearch 按钮。我已经尝试将现有面板包裹在整个表单周围并创建默认按钮，但这仍然不起作用，因为 "enter key" 将按照 telerik 的指示关闭下拉菜单。我创建了一个 control.clientid ，当用户按下回车键时它会触发，但是在控制台中我收到错误 "cannot read click property of null" .

<script>
    var handler = Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyDown;
    Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyDown = function (e) {

        handler.apply(this, [e]); // Let AutoCompleteBox finish it's internal logic

        if (e.keyCode == Sys.UI.Key.enter) {
            this._onBlur();

            //$get("btnServicesSearch").click();
            $get('<%#btnServicesSearch.ClientID%>').click();
            
        }
    }
</script>
<div class="row grid">
    <div class="col-md-12">
        <h2>I'm Searching For:</h2>
    </div>
 <div class="col-md-12">
  <div class="cs-form-service">
   <label class="control-label">Start typing the name of a service</label>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
    <telerik:RadAutoCompleteBox ID="racServices" runat="server" DropDownHeight="150" Skin="SJP" EnableEmbeddedSkins="false"
     IsCaseSensitive="false" InputType="Text" TextSettings-SelectionMode="Single" AllowCustomEntry="true" DropDownPosition="Static"
                    EmptyMessage="Enter first few letters" ClientIDMode="Static" EnableClientFiltering="true" CssClass="input-space" DropDownWidth="224" />
   </telerik:RadAjaxPanel>
  </div>
 </div>
</div>
<div class="row grid">
 <div class="col-md-8 col-sm-12 col-xs-12">
  <div class="col-md-6 col-sm-6 col-xs-6">
   <div class="input-within">
    <label class="control-label">Near</label>
                <asp:TextBox ID="txtZip" runat="server" CssClass="form-control input-sm" placeholder="ZIP Code" />
   </div>
  </div>
  
  <div class="col-md-6 col-sm-6 col-xs-6">
   <div class="input-within">
    <label class="control-label">Within</label>
     <asp:DropDownList ID="ddlRadius" runat="server" CssClass="form-control small-text">
                        <asp:ListItem Value="5" Text="Within 5 miles" />
                        <asp:ListItem Value="10" Text="Within 10 miles" />
                        <asp:ListItem Value="15" Text="Within 15 miles" />
                        <asp:ListItem Value="20" Text="Within 20 miles" />
      <asp:ListItem Value="25" Text="Within 25 miles" />
                    </asp:DropDownList>
   </div>
  </div>
 </div>
              
 <div class="col-md-4 col-sm-12 col-xs-12">
  <asp:Button ID="btnServicesSearch" runat="server" Text="Search" OnClick="btnSearch_Click" CssClass="btn btn-primary btn-md btn-full btn-service-search" />
 </div>
</div>

Answer 1

您需要运行在 DOM 准备好并且您的控件已加载到脚本后。目前，根据执行流程，您的脚本将在视图上生成控件之前首先被调用，这就是为什么它变成 NULL 并且您收到该错误。

您可以尝试将脚本放在页面末尾。此外，以某种方式确保在开始在脚本中操作控件之前已加载该控件。

希望对您有所帮助。

Answer 2

Harvey 所说的 - 将 <script> 和覆盖放在页面末尾，这应该能让您正确地覆盖内容。

还有

从 AutoCompleteBox 中删除 ClientIDMode=Static
尝试 __doPostBack("<%=btnServicesSearch.UniqueID%>", ""); 而不是 click()

Answer 3

你们一直都是正确的，我没有提到的一件事是这是一个用户控件。这是一个 DOM 问题，将代码放在母版页中只是为了测试有效

control.clientid 导致 javascript 错误 "cannot read click property of null"

control.clientid causes javascript error "cannot read click property of null"

c#

asp.net

telerik

autocompletebox