[ACCEPTED]-How do I pass a server control's actual client Id to a javascript function?-javascript

Accepted answer
Score: 14

Put the <%= txtZip.ClientId %> between single quotes, to be like 2 this:

'<%= txtZip.ClientId %>'

<asp:TextBox ID="txtZip" runat="server" onchange="ZipCode_OnChange(this, '<%= txtZip.ClientId %>', txtCity, txtState);" />


Please check this article: http://www.jagregory.com/writings/how-to-use-clientids-in-javascript-without-the-ugliness/

Also I like 1 this answer

Score: 7

There are a lot of ways to fix this, but 18 I find the simplest thing to do in the general 17 case is use the ScriptManager to include 16 a separate script at the top of my pages 15 specifically for the purpose of adding ClientIDs:

void AddClientIDs()
    var clientIDs = new StringBuilder();
    var declaration = "var {0}={1};";

    clientIDs.AppendFormat(declaration, "txtZip", txtZip.ClientID);        

    ClientScript.RegisterClientScriptBlock(this.GetType(), "ClientIDs", clientIDs.ToString(), true); 

Call 14 that in the PreRender event (somewhere after 13 databinding). Then, if you want to get 12 a little fancy you can easily adapt the 11 method up to accept an IEnumerable or params 10 array of controls, and let it use the control 9 names for the javascript variable names. Sometimes 8 I do that, but it's usually simple enough 7 to just add what I need directly to the 6 method.

Even this is somewhat awkward, because 5 controls including in other naming containers 4 (like grids) can still cause problems. I'd 3 like to see the ASP.Net team build something 2 like this directly into the framework soon, but 1 I'm not really expecting it :(

Score: 6
<asp:TextBox ID="txtZip" runat="server" onchange="ZipCode_OnChange(this, txtCity, txtState);">

function ZipCode_OnChange(element, txtCity, txtState) {
    var ClientId = element.getAttribute('id'),
        ret = null,
        value = element.value;

    ret = WebService.GetCityAndState(value, OnComplete1, OnError, ClientId);


Score: 1

Came across the same problem, couldn't fix 5 by any method given above. So I added an 4 intermediate JS added a call to the actual 3 JS function based on value passed. I know 2 its one lame method to solve it, but it 1 still worked for me.


<asp:ListBox ID="List1" runat="server" ondblclick="AddToList2( this,'<%= List2.ClientID %>' );" SelectionMode="Multiple" />


<asp:ListBox ID="List1" runat="server" ondblclick="ProcessList('Add');" SelectionMode="Multiple" />

function ProcessList(xStr){
 if(xStr == "Add")
  AddToList2( '<%= List1.ClientID %>', '<%= List2.ClientID %>' );
  DeleteFromList2( '<%= List2.ClientID %>' );}
Score: 1

you can add the onchange event from the 5 code behind in the page_load method.

protected void Page_Load(object sender, EventArgs e)
    if (IsPostBack) return;
    txtZip.Attributes.Add("onclick", "ZipCode_OnChange(" + txtZip.ClientID + ")");

If you 4 want to pass more than one control along 3 with their ClientID , then this approach 2 is good choice.

I hope this will solve the 1 problem.

Score: 0

I solved the same problem with an <asp:CheckBox...

When using 9 <%= TargetControl.ClientID %> (without single quotes surrounding), ASP.NET 8 renders '&lt;%= TargetControl.ClientID %>' and the associated javascript function 7 isn´t called.

When using '<%= TargetControl.ClientID %>' (with sigle quotes 6 surrounding), ASP.NET don´t evaluates the 5 expression and renders exactly the same 4 inside the single quotes.

So I decide to 3 try with an Input(Checkbox) HTLM control 2 instead, using the following markup

<input id="CheckBox1" type="checkbox" onclick="myFunction(someValue, '<%= TargetControl.ClientID %>')" />

and it 1 worked!!!

Hope it helps.

More Related questions