How to show and hide controls in content page using javascript? RSS

• • Reply
  

  athar_techsa...

  Member

  554 Points

  316 Posts

  Re: How to show and hide controls in content page using javascript?

  Jan 10, 2012 12:58 PM|LINK

  hi

  here is my full code

  <script src='<%=ResolveClientUrl("~/Scripts/jquery-1.4.1.min.js")%>' type="text/javascript"></script> // In master page
  
  <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <script type="text/javascript">
      var ddlId = '<%=ddlstAllCISTables.ClientID%>';
      $('#' + ddlId).change(function () {
          $('#trddls').show('slow');
      });
  </script>
  
  <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      <table cellpadding="3" width="100%">
          <tr>
              <td class="style1" align="center">
                  <asp:Label ID="lblTableNames" runat="server" Text="Select Source Table"></asp:Label>
              </td>
              <td align="left">
                  <asp:DropDownList name="ddlstAllCISTables" ID="ddlstAllCISTables" runat="server"
                      Height="25px" Width="220px">
                  </asp:DropDownList>
              </td>
              <td>
              </td>
              <td></td>
          </tr>
          <tr id="trddls" style="display:none;">
              <td class="style1" align="center">
                  <asp:Label ID="lblSchema" runat="server" Text="Select Target Schema"></asp:Label>
              </td>
              <td align="left">
                  <asp:DropDownList ID="ddlstSchemaNames" runat="server" Height="25px" Width="200px"
                      OnSelectedIndexChanged="ddlstSchemaNamesChanged">
                      <asp:ListItem Text="-- Select Schema --" Value="-- Select Target Schema --"></asp:ListItem>
                      <asp:ListItem Text="bdsp" Value="bdsp"></asp:ListItem>
                      <asp:ListItem Text="oltpdev" Value="oltpdev"></asp:ListItem>
                  </asp:DropDownList>
              </td>
              <td>
              </td>
              <td>
              </td>
          </tr>

• • Reply
  

  nobdy

  Contributor

  5744 Points

  1036 Posts

  Re: How to show and hide controls in content page using javascript?

  Jan 10, 2012 04:28 PM|LINK

  try this

  <script type="text/javascript">
  $(document).ready(function(){
      var ddlId = '<%=ddlstAllCISTables.ClientID%>';
      $('#' + ddlId).change(function () {
          $('#trddls').show('slow');
      });
  });
  </script>

  <div id="-chrome-auto-translate-plugin-dialog" style="opacity: 1 !important; background-image: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: transparent !important; position: absolute !important; top: 0px; left: 0px; overflow-x: visible !important; overflow-y: visible !important; z-index: 999999 !important; text-align: left !important; display: none; background-position: initial initial !important; background-repeat: initial initial !important; padding: 0px !important; margin: 0px !important;"> <div style="max-width: 300px !important; color: #fafafa !important; opacity: 0.8 !important; border-color: #000000 !important; border-width: 0px !important; -webkit-border-radius: 10px !important; background-color: #363636 !important; font-size: 16px !important; padding: 8px !important; overflow: visible !important; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #000), color-stop(50%, #363636), color-stop(100%, #000)); z-index: 999999 !important; text-align: left !important;"> <div class="translate"></div> <div class="additional"></div> </div> </div>
  If this post was useful to you, please Mark it as Answer.
  
  My Blog | My Website
  
• • Reply
  

  athar_techsa...

  Member

  554 Points

  316 Posts

  Re: How to show and hide controls in content page using javascript?

  Jan 11, 2012 05:03 AM|LINK

  hi

  Still not working. please any other way,

  Thanks

• • Reply
  

  Zhongqing Ta...

  Star

  10512 Points

  1354 Posts

  Re: How to show and hide controls in content page using javascript?

  Jan 12, 2012 04:55 AM|LINK

  Hi,

  athar_techsavvy

  please any other way,

  You can add a onchange event using javascript in codebehind.

  protected void Page_Load(object sender, EventArgs e)
          {
              ddlstAllCISTables.Attributes.Add("onchange", "javascript:document.getElementById('trddls').style.display = 'inline';");
          }

  Please mark the replies as answers if they help or unmark if not.
  If you have any feedback about my replies, please contact msdnmg@microsoft.com
  Microsoft One Code Framework
  
• • Reply
  

  athar_techsa...

  Member

  554 Points

  316 Posts

  Re: How to show and hide controls in content page using javascript?

  Jan 14, 2012 07:10 AM|LINK

  Hi

  i tried your code

  ddlstAllCISTables.Attributes.Add("onchange", "javascript:document.getElementById('trddls').style.display = 'inline';");
          }

  still not working. Anyhow i got the working code like this.

  <script type="text/javascript" src="<%=ResolveClientUrl("~/js/jquery-1.6.1.js")%>"></script>
  
  <script type="text/javascript">
          $(document).ready(function() {
              var ddlId = '<%=ddList.ClientID%>';
              $('#' + ddlId).change(function() {
                  if ($('#<%=ddList.ClientID%>').val() == "2") {
                      //$('#<%=dd2.ClientID %>').empty().append('<option selected="selected" value="0">Please select</option>');
                      $('#<%=dd2.ClientID %>').hide();
                  }
                  else {
                      $('#<%=dd2.ClientID %>').show();
                  }
              });
          }); 
      </script>
  
  <div id="trddls">
          <asp:DropDownList ID="ddList" runat="server">
              <asp:ListItem Value="1" Text="Show"></asp:ListItem>
              <asp:ListItem Value="2" Text="Hide"></asp:ListItem>
          </asp:DropDownList>
          <br />
          <br />
          <br />
          <asp:DropDownList ID="dd2" runat="server">
          </asp:DropDownList>
      </div>

  • Marked as answer by athar_techsavvy on Jan 14, 2012 07:10 AM