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

• • Reply
  

  athar_techsa...

  Member

  554 Points

  320 Posts

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

  Jan 10, 2012 11:13 AM|LINK

  HI

  I have a code mention below. My task is to hide ddlstSchemaNames and lblSchema on page load and when i select value from ddlstAllCISTables  i have to show ddlstSchemaNames and lblSchema  using javascript? how to do this?

  <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" OnSelectedIndexChanged="ddlstAllCISTablesChanged">
                  </asp:DropDownList>
              </td>
              <td>
              </td>
              <td></td>
          </tr>
          <tr>
              <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" onchange="ShowButton();">
                      <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>
          <tr>
              <td colspan="2" align="center">
                  <asp:Button ID="btnCompare" runat="server" Text="Compare" Visible="false" ToolTip="Click to compare two tables"
                      OnClick="btnCompare_Click" />
              </td>
          </tr>

• • Reply
  

  nobdy

  Contributor

  5744 Points

  1036 Posts

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

  Jan 10, 2012 11:25 AM|LINK

  Are you using jQuery in your application?? 

  If so, I can provide you with jQuery code.

  <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

  320 Posts

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

  Jan 10, 2012 11:27 AM|LINK

  Thanks

  please provide in jQuery

• • Reply
  

  nobdy

  Contributor

  5744 Points

  1036 Posts

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

  Jan 10, 2012 11:41 AM|LINK

  <script type="text/javascript">

  var ddlId= '<%=ddlstAllCISTables.ClientID%>';

  $('#' + ddlId).change(function(){

  $('#trddls').show('slow');

  });

  </script>

  you have to assign ID to <tr> containing dropdownlists.. like

  <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" onchange="ShowButton();">
                      <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>

  <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

  320 Posts

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

  Jan 10, 2012 11:50 AM|LINK

  hi

  Now i want to show <tr id="trddls" style="display:none;"> when user select an item from the first dropdownlist. How?

  Thanks

• • Reply
  

  nobdy

  Contributor

  5744 Points

  1036 Posts

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

  Jan 10, 2012 11:51 AM|LINK

  I gave you jQuery code

  <script type="text/javascript">

  var ddlId= '<%=ddlstAllCISTables.ClientID%>';

  $('#' + ddlId).change(function(){

  $('#trddls').show('slow');

  });

  <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

  320 Posts

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

  Jan 10, 2012 12:01 PM|LINK

  hi

  when i select value from ddlstAllCISTables it is now showing dropdownlist i.e ddlstSchemaNames. When i select value from ddlstAllCISTables it should show the other controls. how?

• • Reply
  

  nobdy

  Contributor

  5744 Points

  1036 Posts

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

  Jan 10, 2012 12:06 PM|LINK

  Which Other Controls??

  <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

  320 Posts

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

  Jan 10, 2012 12:12 PM|LINK

  sorry

  read this reply

  when i select value from ddlstAllCISTables it is not showing dropdownlist i.e ddlstSchemaNames. When i select value from ddlstAllCISTables it should show the other controls i.e ddlstSchemaNames and label ( i.e tr) . how?

• • Reply
  

  nobdy

  Contributor

  5744 Points

  1036 Posts

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

  Jan 10, 2012 12:14 PM|LINK

  Did you use jQuery code??

  it should work as expected.

  can you post full .aspx Code?

  <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