asked on

How Can I Get the Following RadioButtonList to show/hide Divs with a MasterPage Template in .NET

This code works perfectly within a single .aspx page; however, if I put this code within a .aspx page that uses a MasterPage template then it no longer works. What can I do to make this code work with a MasterPage template:

=============================================================================
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
function GetQuestionValue(showw)
{
debugger;
var showdiv = document.getElementById(showw);
var radio = document.getElementsByName(radQuestion);
if(radio.length > 0)
{
for(var j=0 ; j < radio[0].cells.length ; j++)
{
for(var k=0 ; k < radio[0].cells[j].children.length ; k++)
{
if(radio[0].cells[j].children[k].checked ==
true && radio[0].cells[j].innerText == "Yes")
{
showdiv.style.display ="block" ;

}
else if(radio[0].cells[j].children[k].checked ==
true && radio[0].cells[j].innerText == "No")
{
showdiv.style.display = "none";
}
}
}
}
}
</script>

</head>
<body>
<form id="form1" runat="server">

<asp:RadioButtonList ID="radQuestion" runat="server">
<asp:ListItem Text="Yes" Value="1"></asp:ListItem>
<asp:ListItem Text="No" Value="2"></asp:ListItem>
</asp:RadioButtonList>
<div id="showdiv" runat="server" style="display:none"><br />Testing... the "Yes" option has been selected</div>
<hr />
</form>
</body>
</html>

=============================================================================
And, the following code goes in the Page_Load event within the .cs page:

protected void Page_Load(object sender, EventArgs e)
{
radQuestion.Attributes.Add("onClick", string.Format("GetQuestionValue('{0}');", showdiv.ClientID));
}

=============================================================================
Thank you for the help...

Member_2_4913559

Probably just an ID issue caused by the INamingContainer additions when a masterpage is used. Something like this should help:

var radio = document.getElementsByName('<%=radQuestion.UniqueID%>');

WebGoober

ASKER

Nope... that didn't work. Good try though.

nishant joshi

as while using master page might id changes so better to check the exact id..

run your project and check id of elements using debugger of IE or firefox-firebug or crome debugger..

you will id like ct....

regards,

WebGoober

ASKER

ctl00$ContentPlaceHolder1$radQuestion is the exact id; however, using this exact id still does NOT work. For example, I can use this id like this:

<asp:RadioButtonList ID="ctl00$ContentPlaceHolder1$radQuestion" runat="server">
<asp:ListItem Text="Yes" Value="1"></asp:ListItem>
<asp:ListItem Text="No" Value="2"></asp:ListItem>
</asp:RadioButtonList>

and it throws the following error: Parser Error Message: 'ctl00$ContentPlaceHolder1$radQuestion' is not a valid identifier.

I also tried using the exact id in the javascript code and that still does not work.

WebGoober

ASKER

please update the following line in my example:

var radio = document.getElementsByName('radQuestion');

I missed the quote marks. Now, my example should work in a single .aspx page. Just need to get this working with a MasterPage template.

nishant joshi

update code and let me know..

function GetQuestionValue(showw)
        {
        debugger;
        var showdiv = document.getElementById(showw);
            var radio = document.getElementsById('ctl00$ContentPlaceHolder1$radQuestion');
             if(radio.length > 0)
            {
                  for(var j=0 ; j < radio[0].cells.length ; j++)
                  {
                        for(var k=0 ; k < radio[0].cells[j].children.length ; k++)
                        {
                              if(radio[0].cells[j].children[k].checked == 
                              true && radio[0].cells[j].innerText == "Yes")
                              {
                                showdiv.style.display ="block" ;

                              }
                              else if(radio[0].cells[j].children[k].checked == 
                              true && radio[0].cells[j].innerText == "No")
                              {
                              showdiv.style.display = "none";
                              }
                        }
                  }
            }
    }

Open in new window

nishant joshi

getElementById in masterPage

use jquery is good for you because this id chages

$("asp:RadioButtonList[Name$=radQuestion"]

WebGoober

ASKER

sorry... these last two suggestions don't work as well... good try though.

WebGoober

ASKER

after looking into this some more it seems to me that the following line works:

var radio = document.getElementsByName('<%=radQuestion.UniqueID%>');

However, the following line does not:

<asp:RadioButtonList ID="<%=radQuestion.UniqueID%>" runat="server">

probably because "radQuestion" needs to be defined in the first place. But as far as I can tell the first line does what it's suppose to with the following line:

<asp:RadioButtonList ID="radQuestion" runat="server">

But, the solution still doesn't work - this time it throws the following javascript error:

'0.cells.length' is null or not an object

which tells me that maybe the way the javascript is written - it may not work with the MasterPage syntax, which would be 'ctl00$ContentPlaceHolder1$radQuestion'

Anyway... any help that you can provide would be greatly appreciated.

ASKER CERTIFIED SOLUTION

Member_2_4913559

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

WebGoober

ASKER

Awesome!!!! Excellent work!

The code works like a charm... perfect! Thank you so much - that did the trick.

WebGoober

ASKER

Excellent Work!!! Very Helpful - solution works great!!!