jQuery, ASP.NET Client ID and External JS File

To find any ASP.NET Control in jQuery, we use Client ID property to get the correct ID of the rendered control. For example, to find an ASP.NET textbox with ID "txtName", a familiar jQuery syntax is,

$('<%= txtName.ClientID %>').focus( //Blah  Blah);

If you are writing this above code directly in your .aspx page, then your jQuery code will work but if you move the same code to an external or separate js (Java Script) file, you will get an error "Uncaught Error: Syntax error, unrecognized expression".

Related Post:

Any idea why this works on .aspx page?

Well the reason is, when the jQuery code is placed in .aspx page the jQuery code line such as <%=txtName.ClientID%>, is processed on the server and it is replaced with a proper ID generated by ASP.NET for the control. And when it is placed into a seperate JS file, ASP.NET has no role to play. Since the js file is not processed by ASP.NET and Client ID is not replaced, jQuery will throw the error "Uncaught Error: Syntax error, unrecognized expression" for characters < and > .

So how to fix this?

To fix this error, all you need to do is to remove < and > characters from your jQuery code. Which means you need to change your selectors and there are couples of ways to do this. For example the jQuery code,

$('<%= txtName.ClientID %>').focus( //Blah  Blah);

can be replaced with,

$("input[id*='txtName']").focus( //Blah  Blah);

The above code will select input controls which have "txtName" anywhere within the element's ID attribute value. You can also select the elements via class selectors.

If you are using ASP.NET 4.0, then you can take advantage of ClientIDMode property which when set to Static will keep the same ID in rendered page. For example:

<asp:TextBox ID="txtName" runat="server" ClientIDMode="static" />

will generate something like:

<input type="text" id="txtName" />

So your ID will not change and you don't have to use ClientID property to access the control in jQuery.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Responsive Menu
Add more content here...