locked
asp.net on page load hide control with javascript RRS feed

  • Question

  • User-1059971305 posted

    Hi,

    In the code behind, I am trying to hide a drop down list control on page load using this line.

    this.ClientScript.RegisterClientScriptBlock(this.GetType(), "UnitedStates", "document.getElementById('ddlState').style.display = 'none'");

    I do not get any errors however the asp.net drop down list control is still visible after the page has loaded.

    Does anyone have any ideas?

    Thank you!!

    Monday, March 31, 2008 10:53 PM

Answers

  • User653304408 posted

    Hi! Try this if you want to render the control but hidden (will be able from javascript)

    ddlState.Style.Add("display", "none")

    and try this in order to avoid sending the control to the client (won't be able from javascript)

    ddState.Visible = false

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 31, 2008 11:20 PM

All replies

  • User653304408 posted

    Hi! Try this if you want to render the control but hidden (will be able from javascript)

    ddlState.Style.Add("display", "none")

    and try this in order to avoid sending the control to the client (won't be able from javascript)

    ddState.Visible = false

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 31, 2008 11:20 PM
  • User1971693559 posted

    Hi,

    Can you please show a sample code block which uses Style.Add("display", "none"), I mean with the RegisterClientScriptBlock call.

     Basically, I am trying to render but hide the contols on 'page load' and then show them upon user interaction/conditionally using javascript.

    Thanks in advance...

    Krish.

    Tuesday, July 8, 2008 1:04 PM
  • User798903548 posted

    <form id="Form1" method="post" runat="server">
     <input type="button" id="hideShowButton" onclick="hideShowDDL();" value="Show DDL">
     <asp:DropDownList id="DropDownList1" runat="server">
      <asp:listitem value="1">Item 1</asp:listitem>
      <asp:listitem value="2">Item 2</asp:listitem>
      <asp:listitem value="3">Item 3</asp:listitem>
      <asp:listitem value="4">Item 4</asp:listitem>
      <asp:listitem value="5">Item 5</asp:listitem>
      <asp:listitem value="6">Item 6</asp:listitem>
     </asp:DropDownList>
    </form>

    <script type="text/javascript">
    <!--
    function hideShowDDL()
    {
     var elementRef = document.getElementById('<%= DropDownList1.ClientID %>');
     elementRef.style.display = (elementRef.style.display == 'none') ? 'block' : 'none';
     document.getElementById('hideShowButton').value = (elementRef.style.display == 'none') ? 'Show DDL' : 'Hide DDL';
    }
    window.onload = function ()
    {
     hideShowDDL();
    }
    // -->
    </script>

    You could also leave out the window.onload override and just add DropDownList1.Style.Add("display", "none") to the Page_Load server-side event handler.

    NC...

    Tuesday, July 8, 2008 1:41 PM
  • User1971693559 posted

    Hey NC,

    Thankyou so much....it worked for me...!!

     

    Krish..

    Tuesday, July 8, 2008 2:12 PM
  • User798903548 posted

    Good! Glad that I could help.

    NC...

     

    Tuesday, July 8, 2008 2:18 PM