Show/Hide Panel web control nested inside of an HTML table using jQuery RSS

• • Reply
  

  dasani2009

  Member

  1 Points

  11 Posts

  Show/Hide Panel web control nested inside of an HTML table using jQuery

  Jan 22, 2013 05:17 PM|LINK

  I have tried numerous examples on the web but cannot get this to work.  Seems like it should be really easy...

  I have a Panel control that precedes a <tr> tag on my ASP.NET page: 

  <asp:Panel ID="myph" runat="server">

  I also have a radio button list control higher up on the page, also within the same table structure:

  <asp:RadioButtonList ID="rblCarrier" runat="server" 
                  RepeatDirection="Horizontal">
              </asp:RadioButtonList>

  The values of the RBL come from a database.  I want to trigger the contents of the Panel to be hidden/shown based on the value selected in the RBL using jQuery.

  The page has a master page, everything on my page is within a asp:Content control.

  Here is my jQuery code:

  <script type="text/javascript">
      $(document).ready(function() {    
          $('#<%= rblCarrier.ClientID%>').find('input:radio').click(function() {
              var selVal = $('#<%= rblCarrier.ClientID %>').find('input:checked').val();
              if (selVal == "1") $("#myph").show("fast");                
              else  $("#myph").hide("fast");            
          })
      });
      </script>

  If I replace the line $("#myph").show("fast"); with an alert('test')...it shows the alert popup.  So I know it's getting to the value of the RBL.  I just cannot seem to get the Panel to change.  I have tried it using #myph as well as the ID that is generated by the content place holder.  Neither work.  Any ideas?

• • Reply
  

  _Manvel_

  Contributor

  4240 Points

  922 Posts

  Re: Show/Hide Panel web control nested inside of an HTML table using jQuery

  Jan 22, 2013 05:33 PM|LINK

  You are right it's something really easy

  <script type="text/javascript">
      $(document).ready(function() {
          $('#<%= rblCarrier.ClientID%>').find('input:radio').click(function() {
              var selVal = $('#<%= rblCarrier.ClientID %>').find('input:checked').val();
              if (selVal == "1") $("#<%= myph.ClientID%>").show("fast");
              else  $("#<%= myph.ClientID%>").hide("fast");
          })
      });
      </script>

   

  • Edited by _manvel_ on Jan 22, 2013 05:34 PM
• • Reply
  

  dasani2009

  Member

  1 Points

  11 Posts

  Re: Show/Hide Panel web control nested inside of an HTML table using jQuery

  Jan 22, 2013 06:21 PM|LINK

  _Manvel_

  You are right it's something really easy

  <script type="text/javascript">      $(document).ready(function() {          $('#<%= rblCarrier.ClientID%>').find('input:radio').click(function() {              var selVal = $('#<%= rblCarrier.ClientID %>').find('input:checked').val();              if (selVal == "1") $("#<%= myph.ClientID%>").show("fast");              else  $("#<%= myph.ClientID%>").hide("fast");          })      });      </script>

   

  Does nothing.  I even tried using

  if (selVal == "1") $("#<%= ctl00_ContentPlaceHolder1_myph%>").show("fast");

  When I did that, it throws a runtime exception.
  

• • Reply
  

  _Manvel_

  Contributor

  4240 Points

  922 Posts

  Re: Show/Hide Panel web control nested inside of an HTML table using jQuery

  Jan 22, 2013 06:26 PM|LINK

  Ok let's go hard way

  if (selVal == "1") $("div[id*=myph]").show("fast");

   

• • Reply
  

  dasani2009

  Member

  1 Points

  11 Posts

  Re: Show/Hide Panel web control nested inside of an HTML table using jQuery

  Jan 22, 2013 06:51 PM|LINK

  Still nothing.  Is the problem that this Panel is inside of an HTML table?

• • Reply
  

  dasani2009

  Member

  1 Points

  11 Posts

  Re: Show/Hide Panel web control nested inside of an HTML table using jQuery

  Jan 23, 2013 11:34 AM|LINK

  I finally gave up on this and took what I think is probably the better approach.  I added a new table inside of the <tr> gave it an id and used my jQuery to hide/display the entire table.  Works like charm and only took me about 5 minutes, vs the 3 hours I spent trying to get the .NET control to play nice with jQuery.

  • Marked as answer by dasani2009 on Jan 23, 2013 11:34 AM