getting client id of a control from variable

Question

Hi,

I want the client id of an asp.net textbox control(txtTest) in javascript.But the problem here is the control id comes from a variable as shown below

var testName = 'txtTest';
var testCntrl = document.getElementById('<%=' + testName + '.ClientID %>');

But its throwing

CS1012: Too many characters in character literal

Can any one please help....

Answer 1

<%= blah.ClientID %> is a server side control, but you are trying to pass a clientside variable name to it. By the time testName is set equal to 'txtTest' its too late, you're already on the client.

There are a number of alternatives to get the server side ClientIDs as Rick Stahl discusses.

1) You can pre-load all the control IDs that you know you're going to need like this, they query them (he uses jquery) when you need their elements.

var ids = { 
    txtSymbol: "#<%= txtSymbol.ClientID %>",
    PageContent: "#<%= PageContainer.ClientID %>"
}

This can also be written: var txtSymbol = document.getElementById('<%= txtSymbol.ClientID'); var txtBlah = document.getElementById('<%= txtBlah.ClientID');

2) Or, he wrote a function that will get a control for you from the clientside

function $$(id, context) {
    var el = $("#" + id, context);
    if (el.length < 1)
        el = $("[id$=_" + id + "]", context);
    return el;
}

Be aware that there are some serious caveats. This relies on JQuery, so be sure to include that library and use it like this $$('myASPControlID').val('new val'); The catch is that if you have any controls that create other controls, like listviews, repeaters, gridviews etc. Then finding a single instance of a child control will take some strategy. In that situation, this tool will only get the first instance of a repeated control.

Still, the function provides a way to solve this problem by allowing you to specify a containing element in the second field.

EDIT

Hey L G, if you really need to pass your variable from the client side, then just add the second function and a link to the JQuery library. Then you can get your control with this simple code:

var testName = 'txtTest';
var testCntrl = $$(testName);

Answer 2

If it is C# code (which I assume, given the compilation error), you need to surround strings with " instead of '.

' is used for char values, that can contain only one character (or two if it is an escaped one, such as '\n').

But I don't really get the connection between the compilation error and the code, since the C# compiler should not bother about the javascript code...

Answer 3

Try this:

document.getElementById('<%=txtTest.ClientID %>');

Or more along the lines of your original example:

var testName = '<%=txtTest.ClientID %>'; 

var testCntrl = document.getElementById(testName);

It appears from your example that you have managed to confuse yourself over what is server side and what is client side code.