Calendar Control ID unexpected result

[John Kotuby]

Hi all,

I am trying to use a calendar server control which I have ID="Calendar1" in
the source code. What I am trying to do is emulate a JavaScript calendar
that was being used in an older ASP version of the application. The
javascript version worked nicely -- you click on a calendar.gif in an anchor
next to a textbox. The calender would pop up in a new window, you select the
date, the calendar window would close and the textbox would be populated
with the date. All without making a return trip to the server... very nice.

I was having trouble getting the old javascript to run by passing the code
from the anchor
href="javascript:show_calendar('document.GetElemen tById('txtUpDate2')');"
which was working fine in the ASP. I included the JS file that has the
show_calendar function.

So I am trying to use the VB 2005 Calendar control. I placed it in a User
Control, which appears in the Context area of a Master Page (like the rest
of the content). BTW, all the content is in the same user control, including
the just-added Calendar and the page uses a Master Page. Not too complicated
for a .NET app.

Well, I set the Calendar1 to style="visibility;hidden". Then I included
client side script
onclick="document.getElementById('Calendar1').styl e.visibility='visible'.

I got a clientside error about "Object Required".
When I looked at the source in the browser I see that the ID for the
Calendar is now:
ctl00_Content1_SearchEdit1_Calendar1
Wow. I didn't expect that. Also I haven't read anything anywhere about how
drastically the ID of an element or control can be changed at the browser.

1. Is there an explanation for that particular ID? The name of my User
Control is SearchEdit.ascx. Is there a way to predict what the clientside Id
will become when the control is nested in so many ways? Please direct me to
an article or MSDN discussion of that sort of thing, if anyone can.

2. Is there a way to use the Calendar control so that it actually does what
the old Javascript used to do? That was actually very cool.

Thanks......

[bruce barker]

to insure uniqueness the id includes it parents control id. all control
have a property called ClientID that is the id that will be rendered.

-- bruce (sqlwork.com)
John Kotuby wrote:

Hi all,

I am trying to use a calendar server control which I have ID="Calendar1" in
the source code. What I am trying to do is emulate a JavaScript calendar
that was being used in an older ASP version of the application. The
javascript version worked nicely -- you click on a calendar.gif in an anchor
next to a textbox. The calender would pop up in a new window, you select the
date, the calendar window would close and the textbox would be populated
with the date. All without making a return trip to the server... very nice.

I was having trouble getting the old javascript to run by passing the code
from the anchor
href="javascript:show_calendar('document.GetElemen tById('txtUpDate2')');"
which was working fine in the ASP. I included the JS file that has the
show_calendar function.

So I am trying to use the VB 2005 Calendar control. I placed it in a User
Control, which appears in the Context area of a Master Page (like the rest
of the content). BTW, all the content is in the same user control, including
the just-added Calendar and the page uses a Master Page. Not too complicated
for a .NET app.

Well, I set the Calendar1 to style="visibility;hidden". Then I included
client side script
onclick="document.getElementById('Calendar1').styl e.visibility='visible'.

I got a clientside error about "Object Required".
When I looked at the source in the browser I see that the ID for the
Calendar is now:
ctl00_Content1_SearchEdit1_Calendar1
Wow. I didn't expect that. Also I haven't read anything anywhere about how
drastically the ID of an element or control can be changed at the browser.

1. Is there an explanation for that particular ID? The name of my User
Control is SearchEdit.ascx. Is there a way to predict what the clientside Id
will become when the control is nested in so many ways? Please direct me to
an article or MSDN discussion of that sort of thing, if anyone can.

2. Is there a way to use the Calendar control so that it actually does what
the old Javascript used to do? That was actually very cool.

Thanks......

[Mark Rae]

"John Kotuby" <jo***@powerlist.comwrote in message
news:uS**************@TK2MSFTNGP05.phx.gbl...

href="javascript:show_calendar('document.GetElemen tById('txtUpDate2')');"

That's unlikely to work for three reasons:

1) Your single quotes and double quotes are inconsistent...

2) You mention that this is in a MasterPage, so the client-side ID of
txtUpdate2 will have been modified...

3) JavaScript, like C#, is case-sensitive, so GetElementById needs to be
getElementById...

href=show_calendar('document.GetElementById("<%=tx tUpDate2.ClientID%>")');

[Mark Rae]

"Mark Rae" <ma**@markNOSPAMrae.comwrote in message
news:ea**************@TK2MSFTNGP03.phx.gbl...

3) JavaScript, like C#, is case-sensitive, so GetElementById needs to be
getElementById...

href=show_calendar('document.GetElementById("<%=tx tUpDate2.ClientID%>")');

Therefore:
href=show_calendar('document.getElementById("<%=tx tUpDate2.ClientID%>")');

Sorry - hit the Enter button just too soon...-)

[John Kotuby]

Thanks Bruce

"bruce barker" <no****@nospam.comwrote in message
news:Oe**************@TK2MSFTNGP05.phx.gbl...

>
to insure uniqueness the id includes it parents control id. all control
have a property called ClientID that is the id that will be rendered.

-- bruce (sqlwork.com)
John Kotuby wrote:

>Hi all,

I am trying to use a calendar server control which I have ID="Calendar1"
in the source code. What I am trying to do is emulate a JavaScript
calendar that was being used in an older ASP version of the application.
The javascript version worked nicely -- you click on a calendar.gif in an
anchor next to a textbox. The calender would pop up in a new window, you
select the date, the calendar window would close and the textbox would be
populated with the date. All without making a return trip to the
server... very nice.

I was having trouble getting the old javascript to run by passing the
code from the anchor
href="javascript:show_calendar('document.GetEleme ntById('txtUpDate2')');"
which was working fine in the ASP. I included the JS file that has the
show_calendar function.

So I am trying to use the VB 2005 Calendar control. I placed it in a User
Control, which appears in the Context area of a Master Page (like the
rest of the content). BTW, all the content is in the same user control,
including the just-added Calendar and the page uses a Master Page. Not
too complicated for a .NET app.

Well, I set the Calendar1 to style="visibility;hidden". Then I included
client side script
onclick="document.getElementById('Calendar1').sty le.visibility='visible'.

I got a clientside error about "Object Required".
When I looked at the source in the browser I see that the ID for the
Calendar is now:
ctl00_Content1_SearchEdit1_Calendar1
Wow. I didn't expect that. Also I haven't read anything anywhere about
how drastically the ID of an element or control can be changed at the
browser.

1. Is there an explanation for that particular ID? The name of my User
Control is SearchEdit.ascx. Is there a way to predict what the clientside
Id will become when the control is nested in so many ways? Please direct
me to an article or MSDN discussion of that sort of thing, if anyone can.

2. Is there a way to use the Calendar control so that it actually does
what the old Javascript used to do? That was actually very cool.

Thanks......

[John Kotuby]

Thanks Mark,

I am trying the syntax at the bottom of your reply, but the VS 2005 IDE is
giving me an error about non-matching quotes.
Note: I am copying the actual source that is being shown on screen into this
post.

When I place quotes around the href attribute in the source code...

href="javascript:show_calendar('document.getElemen tById("<%=txtCreateDate.ClientID%>")')"

So that the VStudio error goes away (and the line
<%=txtCreateDate.ClientID%shows up in red)

I get the browser error...

Public member 'ClientID' on type 'String' not found.

pointing to the line in the browser ...
<a
href="javascript:show_calendar('document.getElemen tById("<%=txtCreateDate.ClientID%>")')"
"Mark Rae" <ma**@markNOSPAMrae.comwrote in message
news:Oe*************@TK2MSFTNGP04.phx.gbl...

"Mark Rae" <ma**@markNOSPAMrae.comwrote in message
news:ea**************@TK2MSFTNGP03.phx.gbl...

>3) JavaScript, like C#, is case-sensitive, so GetElementById needs to be
getElementById...

href=show_calendar('document.GetElementById("<%=t xtUpDate2.ClientID%>")');

Therefore:
href=show_calendar('document.getElementById("<%=tx tUpDate2.ClientID%>")');

Sorry - hit the Enter button just too soon...-)

[Mark Rae]

"John Kotuby" <jo***@powerlist.comwrote in message
news:ei*************@TK2MSFTNGP04.phx.gbl...

I am trying the syntax at the bottom of your reply, but the VS 2005 IDE is
giving me an error about non-matching quotes.
Note: I am copying the actual source that is being shown on screen into
this post.

When I place quotes around the href attribute in the source code...

href="javascript:show_calendar('document.getElemen tById("<%=txtCreateDate.ClientID%>")')"

So that the VStudio error goes away (and the line
<%=txtCreateDate.ClientID%shows up in red)

I get the browser error...

Public member 'ClientID' on type 'String' not found.

pointing to the line in the browser ...
<a
href="javascript:show_calendar('document.getElemen tById("<%=txtCreateDate.ClientID%>")')"

Hmm - you might be able to fix it by escaping one of the pairs of quotes
e.g. \'.....\'

Another option, though a bit of a kludge, might be something like:

var objCreateDate = document.getElementById('<%=txtCreateDate.ClientID %>');
href="show_calendar(objCreateDate)";

You seem to keep putting "javascript:" back in...
Also, you seem to keep removing the semi-colon from the end of the line...

[John Kotuby]

Thanks Mark...
I keep putting the javascript: part back in because that is what was in the
original ASP and I thought it was necessary to use as the value for the
href= whereas the onclick= attribute allows direct calling of the javascript
function. I understand that if I include the Runat="Server" that the syntax
would need to change to OnClientClick=.

Here is some code in context as viewed from the server side error message:
----------------------------
Exception Details: System.MissingMemberException: Public member 'ClientID'
on type 'String' not found.

<td nowrap="nowrap">
Line 400: <input type="text" class="smallCbo2"
name="txtCreateDate" id="txtCreateDate" value="<%=txtCreateDate%>" />
Line 401: <a
href="javascript:show_calendar('document.getElemen tById('<%=txtCreateDate.ClientID%>')');"
onmouseover="window.status='Date Picker';return true;"
Line 402: onmouseout="window.status='';return
true;">
Line 403: <img alt="Calendar"
src="../../images/show-calendar.gif" width="17" height="16" border="0"
/></a>
---------------------------------

Note that I have not declared these particular controls as runat=server.
This page is a very complicated mixture of controls for putting together a
long search query for SQL Server. For now I am trying to port most of the
markup as-is until I understand better how the original Author of the ASP
program made it work. Then when time allows, convert the coding to primarily
server controls in ASP.NET 2.0. The page renders fine until I try running
the clientsidejavascript.

Note that line 400 value=<%=txtCreateDate %reneders fine and does not
cause an error.

Oops... I may now see what's happening. I had created a VB string variable
txtCreateDate which happens to have the same name as the ID of the input
control. I will change the ID of the input control to txtCreateDate1 and see
if that helps.

I am also wondering if using the ID of the control for in-line VB is correct
syntax as in ControlId.ClientId. Most of the Online help shows an example of
first declaring an Instance of the control in order to get to the ControlID
property. Sure would be nice if the short-hand version worked.

I guess I will find out soon. I am also going to try assembling the strings
into a variable as you suggested. Maybe in the Code Behind in Page_Init.

.... John
"Mark Rae" <ma**@markNOSPAMrae.comwrote in message
news:ei**************@TK2MSFTNGP03.phx.gbl...

"John Kotuby" <jo***@powerlist.comwrote in message
news:ei*************@TK2MSFTNGP04.phx.gbl...

>I am trying the syntax at the bottom of your reply, but the VS 2005 IDE
is giving me an error about non-matching quotes.
Note: I am copying the actual source that is being shown on screen into
this post.

When I place quotes around the href attribute in the source code...

href="javascript:show_calendar('document.getEleme ntById("<%=txtCreateDate.ClientID%>")')"

So that the VStudio error goes away (and the line
<%=txtCreateDate.ClientID%shows up in red)

I get the browser error...

Public member 'ClientID' on type 'String' not found.

pointing to the line in the browser ...
<a
href="javascript:show_calendar('document.getEleme ntById("<%=txtCreateDate.ClientID%>")')"

Hmm - you might be able to fix it by escaping one of the pairs of quotes
e.g. \'.....\'

Another option, though a bit of a kludge, might be something like:

var objCreateDate =
document.getElementById('<%=txtCreateDate.ClientID %>');
href="show_calendar(objCreateDate)";

You seem to keep putting "javascript:" back in...
Also, you seem to keep removing the semi-colon from the end of the line...