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...
WebGooberAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ddayx10Commented:
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%>');
0
WebGooberAuthor Commented:
Nope... that didn't work. Good try though.
0
nishant joshiTechnology Development ConsultantCommented:
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,
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

WebGooberAuthor Commented:
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.
0
WebGooberAuthor Commented:
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.
0
nishant joshiTechnology Development ConsultantCommented:
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

0
nishant joshiTechnology Development ConsultantCommented:
getElementById in masterPage

use jquery is good for you because this id chages

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



0
WebGooberAuthor Commented:
sorry... these last two suggestions don't work as well... good try though.
0
WebGooberAuthor Commented:
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.


0
ddayx10Commented:
Ahh I just took a logical guess at first. I can see how the masterpage manipulates the naming convention when I look more closely.

I updated your code to simplify, make cross-browser compliant, and ... to work :)


<script type="text/javascript" language="javascript">
      function GetQuestionValue(sender, showw)
      {
        //debugger;
        var showdiv = document.getElementById(showw);
        var radio = sender.getElementsByTagName('input');
        if(radio.length > 0) //seems superfluous
        {
        for(var k=0 ; k < radio.length ; k++)
        {
          //if(radio[k].checked == true && radio[k].innerText == "Yes")
          //changed bc a) .innerText is not cross browser compliant
          // and b) this was easier.
          //Could easily check for the value of the label YES/NO just not necessary
          if(radio[k].checked == true && radio[k].value == "1")
          {
            showdiv.style.display ="block" ;
          }
          else if(radio[k].checked == true && radio[k].value == "2")
          {
			showdiv.style.display = "none";
          }
        }
        }
    }
    </script>

Open in new window

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

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
WebGooberAuthor Commented:
Awesome!!!! Excellent work!

The code works like a charm... perfect! Thank you so much - that did the trick.
0
WebGooberAuthor Commented:
Excellent Work!!! Very Helpful - solution works great!!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.