Use of 'getElementById' within WebUserControl 1

[StevenK]

I'm trying to make use of some javascript code in a WebUserControl but seem to be failing miserably...

In a standard web form I can have the following code:

<form id="form1" runat="server">

<script language="javascript" type="text/javascript">
function SomeFunction()
{
var element = document.getElementById('ddlValues');
var textelement = document.getElementById('txtTest');
if (element.value == '2')
{
textelement.style.visibility = 'hidden';
}
else
{
textelement.style.visibility = 'visible';
}
}
</script>

<aspropDownList ID="ddlValues" runat="server" onchange="SomeFunction();">
<asp:ListItem Text="Value 1" Value="1"></asp:ListItem>
<asp:ListItem Text="Value 2" Value="2"></asp:ListItem>
<asp:ListItem Text="Value 3" Value="3"></asp:ListItem>
<asp:ListItem Text="Value 4" Value="4"></asp:ListItem>
</aspropDownList>
<asp:TextBox ID="txtTest" runat="server" Text="Text Example"></asp:TextBox>

</form>

This all works fine.

However when I introduce similar code into a WebUserControl and use this in a standard web form I get javascript errors indicating that the objects are not found.
It appears that the 'getElementById' (or my usage of it) does not work within a WebUserControl.

Can anyone offer any advice?

Thanks in advance,
Steve

 

[jshurst]

Perhaps the control is getting created with a weird name when it is rendered. Load the page then view the source. Double check to see what the name (ID) of the element is.

Also, if you are going to be writing a lot of JS then you migth want to check out the JQuery JS library. It is now supported in Visual Studio 2008 (might make writing JS easier).

Regards,

J

 

[Guru7777]

It looks like that function is just in the .aspx page itself. If it is an issue of a strange client id being generated by ASP.Net, you can just insert this into the page.

<%= ddlValues.ClientID %>

Like this: (I've also included one for txtTest)

<script language="javascript" type="text/javascript">
function SomeFunction()
{
var element = document.getElementById('<%= ddlValues.ClientID %>');
var textelement = document.getElementById('<%= txtTest.ClientID %>');
if (element.value == '2')
{
textelement.style.visibility = 'hidden';
}
else
{
textelement.style.visibility = 'visible';
}
}
</script>

Its a pretty common problem. Another option is to use document.getElementsByName('whatever') and give each control a name property as well. The issue with that one is that it returns an array, so you have to check the array length to make sure it is okay and then grab the 0th element.

----------------------------------------

TWljcm8kb2Z0J3MgIzEgRmFuIQ==

 

[StevenK]

Thanks Guru777 - that's just what I need.
Works like a dream. Thank you again.

Steve