Client Side ID Differs From Server Side ID

[senfo]

I'm having an issue with trying to access the client-side ID of a
control in a WebControl that I'm designing.

Basically, I'm attempting to add a JavaScript onclick event handler to
an image and pass the ID of another control to the the function that the
event handler call.

Example:

MyTable.ID = "SomethingUnique";
MyImage.Attributes.Add("onclick", "foo('" + MyTable.ClientID + "');");

Unfortunately, the rendered HTML for this code resembles the following:

<img src="img.png" alt="Test Image" title="Test Image"
onclick="foo('SomethingUnique');" />
<table id="ctl00_PageContent_PlaceHolder_MyControl_SomethingUnique">
[...]
</table>

Unfortunately, as there are X number of tables generated, I will not
know the ID's until runtime.

I've tried to access the *real* ID of the client-side control through
the ID, UniqueID and ClientID properties of the Image control --each to
no avail.

Any ideas?

Thank you in advance,

 

[TiSch]

I'm having an issue with trying to access the client-side ID of a
control in a WebControl that I'm designing.

Basically, I'm attempting to add a JavaScript onclick event handler to
an image and pass the ID of another control to the the function that the
event handler call.

Example:

MyTable.ID = "SomethingUnique";
MyImage.Attributes.Add("onclick", "foo('" + MyTable.ClientID + "');");

Unfortunately, the rendered HTML for this code resembles the following:

<img src="img.png" alt="Test Image" title="Test Image"
onclick="foo('SomethingUnique');" />
<table id="ctl00_PageContent_PlaceHolder_MyControl_SomethingUnique">
[...]
</table>

Unfortunately, as there are X number of tables generated, I will not
know the ID's until runtime.

I've tried to access the *real* ID of the client-side control through
the ID, UniqueID and ClientID properties of the Image control --each to
no avail.

Any ideas?

Thank you in advance,

Hi,
1. When do you generate the javascript, try to use Page_PreRender
because its the last opportunity before the page is posted, the
controls are added into viewstate etc.
2. If this does not help, you could use DOM
(http://en.wikipedia.org/wiki/Document_Object_Model) to get the real
javascript control? In your example the table is the next control in
the document: MyImage.Attributes.Add("onclick",
"foo(this.nextSibling);");

Regards,
Tim

 

[Thomas Hansen]

I'm having an issue with trying to access the client-side ID of a
control in a WebControl that I'm designing.

Basically, I'm attempting to add a JavaScript onclick event handler to
an image and pass the ID of another control to the the function that the
event handler call.

Example:

MyTable.ID = "SomethingUnique";
MyImage.Attributes.Add("onclick", "foo('" + MyTable.ClientID + "');");

Unfortunately, the rendered HTML for this code resembles the following:

[snip]

Most of these issues arises from the fact of that you try to get to the
ClientID
before the Control is added to its "final collection" (rooted within
the page)
In plain English; make sure your control is added to its container
control,
and its container control added to its container control and so on
until you
hit the page and you'll mostly be safe...

..t

 

[senfo]

Most of these issues arises from the fact of that you try to get to the
ClientID
before the Control is added to its "final collection" (rooted within
the page)
In plain English; make sure your control is added to its container
control,
and its container control added to its container control and so on
until you
hit the page and you'll mostly be safe...

Erg...I had a feeling that might be the case. I'll have to look over my
code because I can't really think of any way to add the table to the
container, first (although I do set the ID of the table before I try to
read back the ClientID property). Essentially, the reason I'm doing it
this way is because I'm building a CompositeDataBoundControl control
that will hide/show itself with the click of the button.

Heading (+)
xxx xxx xxx xxx
xxx xxx xxx xxx
xxx xxx xxx xxx
xxx xxx xxx xxx
xxx xxx xxx xxx
xxx xxx xxx xxx

More (+)
xxx xxx xxx xxx
xxx xxx xxx xxx
xxx xxx xxx xxx
xxx xxx xxx xxx
xxx xxx xxx xxx
xxx xxx xxx xxx

At any rate, thank you for your response. At least now I know why it's
not working like I expected it to.

 

[senfo]

Hi,
1. When do you generate the javascript, try to use Page_PreRender
because its the last opportunity before the page is posted, the
controls are added into viewstate etc.

That's an idea. I'll have to try that.

2. If this does not help, you could use DOM
(http://en.wikipedia.org/wiki/Document_Object_Model) to get the real
javascript control? In your example the table is the next control in
the document: MyImage.Attributes.Add("onclick",
"foo(this.nextSibling);");

Another good idea. I didn't even know about nextSibling. I can think
of a few other places that might come in handy.

Thank you very much for your response,