Passing parameters to event handlers from aspx to jquery

Question

I have a textbox;

<input runat="server" type="hidden" value="0" id="input1" name="input1_name">

I have a div;

<div id="div1"> some content </div>

I have a seperate .js file where I have a function which is loaded at the Page Load. In that function I have:

$("#div1").click(function(e){ definition; });

I want to pass the client id of the input control mentioned above to the click handler in the above scenario.I have not been able to use the property ClientID on the above mentioned javascript file. Rest all is working fine.

Please advise how do I pass parameters to the click handler of a control on aspx page to the javascript file (in a way getting ClientID there).

This is on .NET.

Please let me know in case I need to post any more details here, if anything look ambiguous.

You just need to print that value into the DOM, place it into a property within that input, such as `value="ClientID", then in your click function, reference $('#input1').val(); to get the value, which would now be the Client ID. — Ohgodwhy
– Ohgodwhy, Commented Sep 28, 2012 at 6:57
input1 wont be accessed with id "input1" on js file. Its a runat server control. — Harsh Chiki
– Harsh Chiki, Commented Sep 28, 2012 at 7:49

Wouter de Kort · Accepted Answer · 2012-09-28 07:01:38Z

Depending on which version of ASP.NET you use you have a couple of options.

Before ASP.NET 4.0 you can do something like this:

<script type="text/javascript"> function DoSomething(){ alert('<%= Control.ClientID %>'); } </script>

In ASP.NET 4.0 a new feature was introduced: ClientIDMode:

<asp:TextBox ID="myCustomId" runat="server" Width="65%" ClientIDMode="Static" />

will output:

<input id="myCustomId" style="width: 65%" name="ctl00$MasterPageBody$ctl00$txtEcho2" />

If you use the static ClientIDMode you can use the Id in your JavaScript without any problems.

Here is a nice blog that explains the different options: ASP.NET 4.0 ClientID Overview

Thanks Wouter. Incase I am working on older versions, what can be a solution for the same. As you mentioned in the first part, .ClientID can be used only if script is a part of some other js file. Correct me if I am wrong.
The first part works for older versions! Because of the <%= %> the server will put the correct value inside your JavaScript.

Collectives™ on Stack Overflow

Passing parameters to event handlers from aspx to jquery

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related