User Control Access from Javascript

  • Thread starter Thread starter trinitypete
  • Start date Start date
T

trinitypete

Hi all,

I have a user control that uses control literal to build
a heading with a link, and a div containing links below.

As the link heading is hit, I want to change the style of
the div, making it visible or not. Yep you guessed it,
expanding tree type functionality.

The header has an onclick event onclick='Doexpandcollapse
(Personal)'

The div is set as follows "<DIV> ID=Personal".

From the page load event in the user control I register a
client script block.

function Doexpandcollapse(whichElement)
{
whichElement.style.display=
(whichelement.style.display="none")?" ":"none";
}

I get an error Personal is undefined.
I have also tried document.all.Personal get the same error
I have also tried document.all.whichElement

none of them seem to be able to locate the DIV.

/*
<HEAD>
<title>DefaultPage</title>
<meta content="Microsoft Visual
Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript"
name="vs_defaultClientScript">
<meta
content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
<LINK href="IntranetStyleSheet.css"
type="text/css" rel="stylesheet">
</HEAD>
<body bottomMargin="0" topMargin="10">
<form name="Form1" method="post"
action="Default.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE"
value="dDwtODk2MzgzMTIzO3Q8O2w8aTwxPjs+O2w8dDw7bDxpPDE+Oz4
7bDx0PHA8cDxsPFBhZ2VJbmRleDtPdGhlckxpbmtzO090aGVyTGlua3NVc
mxzO0ltYWdlTGlua0xlZnRJbWFnZVVybDtJbWFnZUxpbmtMZWZ0VmlzaWJ
sZTtVc2VyUGFnZXM7PjtsPGk8MD47QDxDb250ZW50O01haW50LlBhZ2U7R
GVsZXRlIFBhZ2U7PjtAPENvbnRlbnQuYXNweD9QYWdlSW5kZXg9MDtNYWl
udFBhZ2UuYXNweD9QYWdlSW5kZXg9MDtEZWxldGVQYWdlLmFzcHg/UGFnZ
UluZGV4PTA7PjsuLi9pbWFnZXMvdHJpbml0eV9sb2dvLmpwZztvPHQ+O0B
UQ1MuQXBwbGljYXRpb25zLk5ldC50Y3NJbnRyYW5ldFBvcnRhbC5JbnRyY
W5ldFBhZ2UsIHRjc0ludHJhbmV0Q2xhc3NlcywgVmVyc2lvbj0xLjAuMC4
wLCBDdWx0dXJlPW5ldXRyYWwsIFB1YmxpY0tleVRva2VuPW51bGw8YjxBQ
UVBQUFELy8vLy9BUUFBQUFBQUFBQU1BZ0FBQUVsMFkzTkpiblJ5WVc1bGR
FTnNZWE56WlhNc0lGWmxjbk5wYjI0OU1TNHdMakF1TUN3Z1EzVnNkSFZ5W
lQxdVpYVjBjbUZzTENCUWRXSnNhV05MWlhsVWIydGxiajF1ZFd4c0JRRUF
BQUF6VkVOVExrRndjR3hwWTJGMGFXOXVjeTVPWlhRdWRHTnpTVzUwY21Gd
VpYUlFiM0owWVd3dVNXNTBjbUZ1WlhSUVlXZGxCQUFBQUFad1lXZGxhV1F
PYzJWeGRXVnVZMlZ1ZFcxaVpYSVBiR1ZtZEdoaGJtUnRiMlIxYkdWekVIS
nBaMmgwYUdGdVpHMXZaSFZzWlhNQkFBWUdDQUlBQUFBR0F3QUFBQVJJYjI
xbDZBTUFBQWtFQUFBQUNRVUFBQUFSQkFBQUFBRUFBQUFHQmdBQUFBQVJCU
UFBQUFFQUFBQUpCZ0FBQUFzPT47YjxBQUVBQUFELy8vLy9BUUFBQUFBQUF
BQU1BZ0FBQUVsMFkzTkpiblJ5WVc1bGRFTnNZWE56WlhNc0lGWmxjbk5wY
jI0OU1TNHdMakF1TUN3Z1EzVnNkSFZ5WlQxdVpYVjBjbUZzTENCUWRXSnN
hV05MWlhsVWIydGxiajF1ZFd4c0JRRUFBQUF6VkVOVExrRndjR3hwWTJGM
GFXOXVjeTVPWlhRdWRHTnpTVzUwY21GdVpYUlFiM0owWVd3dVNXNTBjbUZ
1WlhSUVlXZGxCQUFBQUFad1lXZGxhV1FPYzJWeGRXVnVZMlZ1ZFcxaVpYS
VBiR1ZtZEdoaGJtUnRiMlIxYkdWekVISnBaMmgwYUdGdVpHMXZaSFZzWlh
NQkFBWUdDQUlBQUFBR0F3QUFBQVpRWVdkbElESFFCd0FBQ1FRQUFBQUpCU
UFBQUJFRUFBQUFBUUFBQUFZR0FBQUFBQkVGQUFBQUFRQUFBQWtHQUFBQUN
3PT0+Oz47Pj47PjtsPGk8MT47aTwzPjtpPDU+Oz47bDx0PHA8cDxsPEltY
WdlVXJsOz47bDwuLi9pbWFnZXMvdHJpbml0eV9sb2dvLmpwZzs+Pjs+Ozs
+O3Q8cDxwPGw8VmlzaWJsZTs+O2w8bzxmPjs+Pjs+Ozs+O3Q8cDxwPGw8V
mlzaWJsZTs+O2w8bzxmPjs+Pjs+Ozs+Oz4+Oz4+Oz4+Oz4VjdJyQDGO4uo
/blpMHMc/AvRcPg==" />

<P>
<TABLE id="Table2" cellSpacing="0" cellPadding="0"
width="100%" border="0">
<TR>
<TD noWrap><a
id="PageHeaderControl_ImageLinkLeft"><img
src="images/trinity_logo.jpg" border="0" /></a></TD>
<TD noWrap align="center"></TD>
<TD noWrap align="right"></TD>
</TR>
<tr>
<td height="5"></td>
</tr>
</TABLE>
<TABLE id="Table1" cellSpacing="0" cellPadding="0"
width="100%" border="0">
<TR>
<TD id="PageHeaderControl_tblcellPages"
align="left" width="1%"><table cellspacing="0"
cellpadding="5" border="0" style="width:100%;border-
collapse:collapse;">
<tr>
<td class="ActivePage" nowrap="nowrap"
align="Center"><a class="PageLink" href="default.aspx?
PageIndex=0">Home</a></td><td class="InactivePage"
nowrap="nowrap" align="Center"><a class="PageLink"
href="default.aspx?PageIndex=1">Page 1</a></td>
</tr>
</table></TD>

<TD class="InactivePage"
width="98%">&nbsp;</TD>
<TD id="PageHeaderControl_tblcellMaint"
align="right"><table cellspacing="0" cellpadding="5"
align="Right" border="0" style="width:100%;border-
collapse:collapse;">
<tr>
<td class="InactivePage" nowrap="nowrap"
align="Center"><a class="MaintLink" href="Content.aspx?
PageIndex=0">Content</a></td><td class="InactivePage"
nowrap="nowrap" align="Center"><a class="MaintLink"
href="MaintPage.aspx?PageIndex=0">Maint.Page</a></td><td
class="InactivePage" nowrap="nowrap" align="Center"><a
class="MaintLink" href="DeletePage.aspx?
PageIndex=0">Delete Page</a></td>
</tr>
</table></TD>

</TR>
<TR>
<TD class="PagerBackground" colSpan="2"
height="4"></TD>
<TD class="PagerBackground"
height="4"></TD>
</TR>
</TABLE>
</P>
<P>

<LINK href="../../IntranetStyleSheet.css" type="text/css"
rel="stylesheet">
<TABLE class="Dialogue" id="Table1" cellSpacing="0"
cellPadding="10" width="100%" border="0">
<TR>
<TD class="PagerBackground" style="FONT-
WEIGHT: bold" align="center" height="20">Favourite
Links</TD>
<TD class="PagerBackground" align="right"
width="2%" height="20"><input type="submit"
name="Links1:btnClose" value="X" id="Links1_btnClose"
class="CloseButton" style="height:0px;width:20px;" /></TD>
</TR>
<TR>
<TD id=" " colspan="2"><h5
STYLE='COLOR:blue'><a STYLE='CURSOR: hand;'
onclick='DoExpandCollapse()'><IMG src='images/plus.jpg'
alt='Expand/Collapse Node' border='0'
height='10'></a>&nbsp;Personal</h5><DIV title = 'Yeh
right!' style=' display: none; ID='Personal'><LI style='
FONT-WEIGHT: bold; FONT-SIZE: 8pt; FONT-FAMILY: Arial;
LIST-STYLE-TYPE: disc'><a style='CURSOR: hand; COLOR:
blue; TEXT-DECORATION: none;'
href='http://www.microsoft.com' alt='Microsofts Web
Site'></a>MyLink</LI><LI style=' display: none; FONT-
WEIGHT: bold; FONT-SIZE: 8pt; FONT-FAMILY: Arial; LIST-
STYLE-TYPE: disc'><a style='CURSOR: hand; COLOR: blue;
TEXT-DECORATION: none;' href='http://www.microsoft.com'
alt='Microsofts Web Site'></a>MyLink1</LI><LI style='
display: none; FONT-WEIGHT: bold; FONT-SIZE: 8pt; FONT-
FAMILY: Arial; LIST-STYLE-TYPE: disc'><a style='CURSOR:
hand; COLOR: blue; TEXT-DECORATION: none;'
href='http://www.microsoft.com' alt='Microsofts Web
Site'></a>MyLink2</LI><LI style=' display: none; FONT-
WEIGHT: bold; FONT-SIZE: 8pt; FONT-FAMILY: Arial; LIST-
STYLE-TYPE: disc'><a style='CURSOR: hand; COLOR: blue;
TEXT-DECORATION: none;' href='http://www.microsoft.com'
alt='Microsofts Web Site'></a>MyLink3</LI><LI style='
display: none; FONT-WEIGHT: bold; FONT-SIZE: 8pt; FONT-
FAMILY: Arial; LIST-STYLE-TYPE: disc'><a style='CURSOR:
hand; COLOR: blue; TEXT-DECORATION: none;'
href='http://www.microsoft.com' alt='Microsofts Web
Site'></a>MyLink4</LI></DIV><h5 STYLE='COLOR:blue'><a
STYLE='CURSOR: hand;' onclick='DoExpandCollapse()'><IMG
src='images/plus.jpg' alt='Expand/Collapse Node'
border='0' height='10'></a>&nbsp;Test</h5><DIV title
= 'Yeh right!' style=' display: none; ID='Test'><LI
style=' FONT-WEIGHT: bold; FONT-SIZE: 8pt; FONT-FAMILY:
Arial; LIST-STYLE-TYPE: disc'><a style='CURSOR: hand;
COLOR: blue; TEXT-DECORATION: none;'
href='http://www.trinitypartner.com' alt='Trinity Partner
Web Site'></a>My Other Link</LI><LI style=' display:
none; FONT-WEIGHT: bold; FONT-SIZE: 8pt; FONT-FAMILY:
Arial; LIST-STYLE-TYPE: disc'><a style='CURSOR: hand;
COLOR: blue; TEXT-DECORATION: none;'
href='http://www.trinitypartner.com' alt='Trinity Partner
Web Site'></a>My Other Link1</LI><LI style=' display:
none; FONT-WEIGHT: bold; FONT-SIZE: 8pt; FONT-FAMILY:
Arial; LIST-STYLE-TYPE: disc'><a style='CURSOR: hand;
COLOR: blue; TEXT-DECORATION: none;'
href='http://www.trinitypartner.com' alt='Trinity Partner
Web Site'></a>My Other Link2</LI><LI style=' display:
none; FONT-WEIGHT: bold; FONT-SIZE: 8pt; FONT-FAMILY:
Arial; LIST-STYLE-TYPE: disc'><a style='CURSOR: hand;
COLOR: blue; TEXT-DECORATION: none;'
href='http://www.trinitypartner.com' alt='Trinity Partner
Web Site'></a>My Other Link3</LI></TD>

</TR>
<TR>
<TD class="Pagerbackground" align="right"
height="20"></TD>
<TD class="Pagerbackground" noWrap
align="right" width="2%" height="20"><a
id="Links1_HyperLink1">Maintain Links</a></TD>
</TR>
</TABLE>
<script language="javascript">
<!--
function DoExpandCollapse()
{
alert(document.all.Personal);
/* alert(whichElement.id);
alert(whichElement.style.display);
whichElement.style.display =
(whichElement.style.display)?"":"none";*/
}
//-->
</script>
<INPUT id="mybutton" type="button" value="Button">
</P>
</form>
</body>
*/


Any help would be appreciated.....Pete
 
Hi Pete,

You'll need to use the getElementById() javascript function. In your client
script block:

function Doexpandcollapse(whichElement)
{
getElementById(whichElement).style.display=
(getElementById(whichElement).style.display="none")?" ":"none";
}

-- Alex Papadimoulis
 
I just had the same problem. Check the generated HTML (View Source) and you
will see that the name of the user control is prepended to the ID. You will
have to find the control with the name UC:Element.

Lloyd Sheen
 
Pete,

Another thing to note is that the ID on the server will often vary on the
client.

You may need to pass to your clientside javascript function the Client ID of
the Div: Personal.ClientID

-- Alex Papadimoulis
 
Hi all,

Thanks for the replies. I'm still having the problem.

Looking at the rendered HTML the DIV has definately got
the ID of Personal and has not been prefixed with the
user control. With regard to using the client ID, I
thought this would only be for controls where the ID is
generated by ASP.NET (HTML included below).

I have also tried the getElementById in the client script
block. Here is the script as rendered at runtime.

As the function executes I get the message Personal is
undefined.

/*
<SCRIPT LANGUAGE=javascript>function ExpandCollapse
(whichElement){a=document.getElementById(whichElement);}
</SCRIPT>
*/

Heres the HTML:

/*
<TD id="Links1_tblCellContent"
colspan="2"><h5 STYLE='COLOR:blue'><a STYLE='CURSOR:
hand;' onclick='DoExpandCollapse(Personal)'><IMG
src='images/plus.jpg' alt='Expand/Collapse Node'
border='0' height='10'></a>&nbsp;Personal</h5><DIV
style=' display: none; ID=Personal><LI style=' FONT-
WEIGHT: bold; FONT-SIZE: 8pt; FONT-FAMILY: Arial; LIST-
STYLE-TYPE: disc'><a style='CURSOR: hand; COLOR: blue;
TEXT-DECORATION: none;' href='http://www.microsoft.com'
alt='Microsofts Web Site'></a>MyLink</LI><LI style='
display: none; FONT-WEIGHT: bold; FONT-SIZE: 8pt; FONT-
FAMILY: Arial; LIST-STYLE-TYPE: disc'><a style='CURSOR:
hand; COLOR: blue; TEXT-DECORATION: none;'
href='http://www.microsoft.com' alt='Microsofts Web
Site'></a>MyLink1</LI><LI style=' display: none; FONT-
WEIGHT: bold; FONT-SIZE: 8pt; FONT-FAMILY: Arial; LIST-
STYLE-TYPE: disc'><a style='CURSOR: hand; COLOR: blue;
TEXT-DECORATION: none;' href='http://www.microsoft.com'
alt='Microsofts Web Site'></a>MyLink2</LI><LI style='
display: none; FONT-WEIGHT: bold; FONT-SIZE: 8pt; FONT-
FAMILY: Arial; LIST-STYLE-TYPE: disc'><a style='CURSOR:
hand; COLOR: blue; TEXT-DECORATION: none;'
href='http://www.microsoft.com' alt='Microsofts Web
Site'></a>MyLink3</LI><LI style=' display: none; FONT-
WEIGHT: bold; FONT-SIZE: 8pt; FONT-FAMILY: Arial; LIST-
STYLE-TYPE: disc'><a style='CURSOR: hand; COLOR: blue;
TEXT-DECORATION: none;' href='http://www.microsoft.com'
alt='Microsofts Web Site'></a>MyLink4</LI></DIV><h5
STYLE='COLOR:blue'><a STYLE='CURSOR: hand;'
onclick='DoExpandCollapse(Test)'><IMG
src='images/plus.jpg' alt='Expand/Collapse Node'
border='0' height='10'></a>&nbsp;Test</h5><DIV style='
display: none; ID=Test><LI style=' FONT-WEIGHT: bold;
FONT-SIZE: 8pt; FONT-FAMILY: Arial; LIST-STYLE-TYPE:
disc'><a style='CURSOR: hand; COLOR: blue; TEXT-
DECORATION: none;' href='http://www.trinitypartner.com'
alt='Trinity Partner Web Site'></a>My Other Link</LI><LI
style=' display: none; FONT-WEIGHT: bold; FONT-SIZE: 8pt;
FONT-FAMILY: Arial; LIST-STYLE-TYPE: disc'><a
style='CURSOR: hand; COLOR: blue; TEXT-DECORATION: none;'
href='http://www.trinitypartner.com' alt='Trinity Partner
Web Site'></a>My Other Link1</LI><LI style=' display:
none; FONT-WEIGHT: bold; FONT-SIZE: 8pt; FONT-FAMILY:
Arial; LIST-STYLE-TYPE: disc'><a style='CURSOR: hand;
COLOR: blue; TEXT-DECORATION: none;'
href='http://www.trinitypartner.com' alt='Trinity Partner
Web Site'></a>My Other Link2</LI><LI style=' display:
none; FONT-WEIGHT: bold; FONT-SIZE: 8pt; FONT-FAMILY:
Arial; LIST-STYLE-TYPE: disc'><a style='CURSOR: hand;
COLOR: blue; TEXT-DECORATION: none;'
href='http://www.trinitypartner.com' alt='Trinity Partner
Web Site'></a>My Other Link3</LI></TD> */

Regards, Pete.
 
Please see reply to Lloyd.

Pete.
-----Original Message-----
Pete,

Another thing to note is that the ID on the server will often vary on the
client.

You may need to pass to your clientside javascript function the Client ID of
the Div: Personal.ClientID

-- Alex Papadimoulis
Click to expand...
 
OK a little bit more info:

I have worked out that the undefined error message goes
away if I place the name in quotes when callinf the
script.

e.g. before ExpandCollapse(Personal) now ExpandCollapse
("Personal"), however, I still cant access the DIV
elements, so I changed the expand collapse script to get
all DIV tags and display the ID's like so:

function DoExpandCollapse()
{
alert('ExpandCollapse');
var coll = document.all.tags("DIV");
for (i=0; i<coll.length; i++)
{
alert(coll.id);
}
}

The ID's are showing as empty string but I can see the
TWO DIVs in the source one with an ID of Test and another
with an ID of Personal. - Whats happening to the ID's?

Pete.
 
GOT IT.....

I didn't think it mattered (maybe someone can confirm)
but the HTML I was rendering via the literal control for
the DIV was as follows:

/*<DIV style=' display: none; id="Personal">*/

Event changing the function to loop through elements I
could see the DIV but it had no ID. I changed the HTML

/*<DIV id="Personal"; style=' display: none;>*/

and it worked a treat?????????

I thought the order of HTML tags was irrelevant?

Pete.
 
Hi Peter,

I am glad to know that the problem is resolved.

For the issue regarding the order of HTML tags, I cannot reproduce the
problem on my side. Please try the following simple code snippet on your
side.

--------------------------------------
<html>
<head>
<title>My Example</title>
<script language="Javascript">
var origDivHTML;

function init()
{
origDivHTML = myDiv.innerHTML;
}

function setValues()
{
var oldinnerHTML = "your original innerHTML: " + yourDiv.innerHTML ;
alert(oldinnerHTML);
yourDiv.innerHTML = origDivHTML;

var curinnerHTML = "your current innerHTML: " + yourDiv.innerHTML ;
alert(curinnerHTML);
}
</script>
</head>

<body onload="init()">

<div style="" id="myDiv">
<select name="firstSelect" size="1" >
<option>11111</option>
<option>22222</option>
<option>33333</option>
</select>
</div>

<div style="" id="yourDiv">
<select name="secondSelect" size="1" >
<option>aaaa</option>
<option>bbbb</option>
<option>cccc</option>
</select>
</div>
<button onclick = "setValues();">click me to set the values</button>
</body>
</html>
--------------------------------------

Would you pleaes try to reproduce the problem on your side with the above
testing sample? I certainly appreciate your time.

If I have misunderstood your concern, please feel free to let me know.

Best regards,

Jacob Yang
Microsoft Online Partner Support
Get Secure! ¨C www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.
 
Jacob,

Thanks for your reply and code snippet. I implemented the
code and it seemed fine, unsure what was happening in my
example other that the HTML was rendered from a user
control. I could zip up a quick example and send it to
you if you like? Please let me know.

Regards, Pete.
 
Jacob,

OK I have tried to reproduce this again but the code has
moved on somewhat and now I am finding it impossible to
reproduce - isn't that usually the case. However, I do
have a theory.

The page is essentially made up of tables containing
various user controls. Each user control has tables
contained within it. Looking back at the original HTML
that was rendered in the first Mail, it looks as if
tables within the different user controls are getting
rendered with the same ID - Table 1 - I guess this has
got to cause problems, I know it still doesn't explain
the error I was originally getting.

Guess I will have to put this down as one of those things
as I am really struggling to reproduce.

Thanks for your help anyway....Pete
 
Hi Peter,

Thank you for your update.

If you can zip up a quick example for reproducing the problem, please send
it to my email box - (e-mail address removed) and notify me in this thread.
Personally, I prefer that you can show your reproducing sample and the
detailed reproducing steps in the newsgroup. It will be helpful to
everybody here.

If you cannot compose a simple reproducing example for this issue, please
try to change the value of the style and test this issue again. (Maybe this
issue is caused by the "display: none".)

On the other hand, as you have mentioned before, I agree with you that "I
didn't think it mattered" :-)

If you have any more concerns for this issue, please feel free to let me
know.

Best regards,

Jacob Yang
Microsoft Online Partner Support
Get Secure! ¨C www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.
 
Back
Top