Calendar Control ID unexpected result

  • Thread starter Thread starter bruce barker
  • Start date Start date
B

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)
 
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.GetElementById('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').style.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......
 
href="javascript:show_calendar('document.GetElementById('txtUpDate2')');"
Click to expand...

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("<%=txtUpDate2.ClientID%>")');
 
3) JavaScript, like C#, is case-sensitive, so GetElementById needs to be
getElementById...

href=show_calendar('document.GetElementById("<%=txtUpDate2.ClientID%>")');
Click to expand...

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

Sorry - hit the Enter button just too soon...-)
 
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.getElementById("<%=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.getElementById("<%=txtCreateDate.ClientID%>")')"
 
Thanks Bruce

bruce barker said:
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)
Click to expand...
 
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.getElementById("<%=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.getElementById("<%=txtCreateDate.ClientID%>")')"
Click to expand...

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...
 
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.getElementById('<%=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
 
Back
Top