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?
 
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
 
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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.