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

Question

I'm using telerik autocomplete box for one of my drop down fields. When a user presses enter the telerik autocompletebox is designed to close the drop down. My goal is when a user presses enter the btnServicesSearch button will be clicked. I've tried wrapping the existing panel around the entire form and creating efault button and this still does not work because the "enter key" will just close the drop down as telerik has instructed it to. I have created a control.clientid which does fire when a user presses enter but, in the console i get the error "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

You need to run your script after the DOM is ready and your control is loaded into it. Currently, as per the execution flow, your script will be called first before your control is generated on the view which is why it becomes NULL and you are receiving that error.

You can try putting your script at the end of the page. Also, somehow just make sure that the control is already loaded before you start manipulating with it in your scripts.

Hope this helps.