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

Question

I have the following textbox server control in my web page:

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

When the page renders, it is built including the following:

<input name="txtZip" type="text" id="txtZip" onchange="ZipCode_OnChange(this, &lt;%= txtZip.ClientId %>, txtCity, txtState);" />

I'm trying to pass the text box's client IDas the 2nd param to this Javascript function:

function ZipCode_OnChange(txtZipCode, ClientId) {
    var ret;
    ret = WebService.GetCityAndState(txtZipCode.value, OnComplete1, OnError, ClientId);
}

How do I get it to, on the server, evaluate the texbox's control and to pass that literal string to the Javascript function?

Community · Accepted Answer · 2017-05-23 12:09:59Z

14

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

'<%= txtZip.ClientId %>'


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

Update

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

Also I like this answer

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Sep 1, 2009 at 12:59

Amr Elgarhy

69.2k70 gold badges193 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chad Over a year ago

I previously tried that, but what ends up getting passed to the function is the literal "'<%= txtZip.ClientId %>'", the text within the server sided % thingy was never evaluated.

TPG Over a year ago

I did this but just render the whole thing without any changes.

Joel Coehoorn · Accepted Answer · 2009-09-01 13:36:30Z

There are a lot of ways to fix this, but I find the simplest thing to do in the general case is use the ScriptManager to include a separate script at the top of my pages 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 that in the PreRender event (somewhere after databinding). Then, if you want to get a little fancy you can easily adapt the method up to accept an IEnumerable or params array of controls, and let it use the control names for the javascript variable names. Sometimes I do that, but it's usually simple enough to just add what I need directly to the method.

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

andres descalzo · Accepted Answer · 2009-09-01 13:08:03Z

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);
}

answered Sep 1, 2009 at 13:08

andres descalzo

15k14 gold badges66 silver badges119 bronze badges

Comments

score 1 · Accepted Answer · 2009-12-05 10:46:35Z

1

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

Before:

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

After

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

<script>
function ProcessList(xStr){
 if(xStr == "Add")
  AddToList2( '<%= List1.ClientID %>', '<%= List2.ClientID %>' );
 else
  DeleteFromList2( '<%= List2.ClientID %>' );}
</script>

edited Dec 5, 2009 at 10:46

answered Dec 5, 2009 at 10:29

Knightshade

Comments

Kiquenet · Accepted Answer · 2016-03-03 13:45:30Z

1

you can add the onchange event from the 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 want to pass more than one control along with their ClientID , then this approach is good choice.

I hope this will solve the problem.

edited Mar 3, 2016 at 13:45

Kiquenet

15.2k36 gold badges152 silver badges250 bronze badges

answered Jan 29, 2012 at 18:40

Ram Mourya

2,5884 gold badges19 silver badges25 bronze badges

Comments

Agrock · Accepted Answer · 2009-09-28 02:46:52Z

0

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

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

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

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

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

and it worked!!!

Hope it helps.

answered Sep 28, 2009 at 2:46

Agrock

Collectives™ on Stack Overflow

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

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related