Newbie Textbox ID changes dynamically

[msch-prv]

Please bear with me: I am a newbie at ASP.NET 2.0.

I created an aspx file that calls up a js calendar when the date icon
is clicked. The date selected by the user is copied back into the
textbox. This works fine on a single aspx file.

When I include the same code in the content page of a slave file, the
textbox ID changes its ID name causing the js code to fail. Code
excerpt:

<asp:TextBox ID="datBeg1" runat="server" maxlength="25" />
<a href="javascript:NewCal('datBeg1','ddmmyyyy',true,24)">
<img src="icons/cal.gif" width="16" height="16" border="0"
alt="Pick a date"></a>

The browser reveals that TextBox ID changed to smthg. like
'ctl00_CONTENT_datBeg1', causing the program to crash. In the single
aspx file, the textbox ID remains constant. I am puzzled.

Thanks for any ideas, Mark

 

[Steve C. Orr [MVP, MCSD]]

You should dynamically output the name of the textbox instead of hardcoding
it.
You can get the name from the datBeg1.ClientID property.

 

[Marina Levit [MVP]]

Sorry, I don't know what a 'slave' file is.

In any case of a user control for example, this renaming is done to ensure
unique names for all control. For example, if you were to drag 2 of the same
user control on a page, then there might be 2 textboxes called 'datBeg1'.
This would not be good.
ASP.NET renames them, to ensure unique names.

The proper technique is not to hard code the ID in your javascript. You can
emit the correct control name by using its ClientID property on the server,
and have it be emitted into the javascript, so the javascript generated is
correct.

 

[msch-prv]

Many thanks to both of you. Sorry, Marina, I meant to say
master/content pages

How would you do the clientID substitution? I tried the following, but
it did not work:

<a href="javascript:NewCal(datBeg1.ClientID,'ddmmyyyy',true,24)">

<a href="javascript:NewCal(<%=datBeg1.ClientID %>,'ddmmyyyy',true,24)">

Thanks, Mark

 

[Marina Levit [MVP]]

The first one doesn't work, because in javascrip that is looking for a
variable named datBeg1 and its ClientID property. You don't have such a
client side object. This is the difference between client and server.

In the second case, the result of that, I am guessing is:
href="javascript:NewCal(ctl00_CONTENT_datBeg1,'ddmmyyyy',true,23)"

As you see, in this case also, you have the same problem, of passing in a
variable called ctl00_CONTENT_datBeg1, which of course also doesn't exist.

You would have to wrap it in single quotes, in order for it to just be a
string in javascript.

You should look at the generated HTML, and adjust things accordingly so the
emitted javascript is syntactically correct.

 

[msch-prv]

Thank very much! The following does it:

<a href="javascript:NewCal('<%=datBeg1.ClientID
%>','ddmmyyyy',true,24)">