Controls are appearing and disappearing in the page load event of javascript

JavaScript
1

Hi,

I’m having an aspx page with server side controls like textbox, dropdownlsit etc. I need to hide all these controls during initial page load.

Whenever user selects any value from other dropdown, then i need to populate the controls accordingly. Everything is fine, But at the time of loading these hidden controls are appearing like flash and then disappearing which is not good for the client. Can anyone please help me out resolving this, I’m using JQuery document.Ready function to handle this… Below is the code…


var ispostBack =false;
function pageLoad() {
    $(document).ready(function () {
        HideCtrls();
//Some other code here
     }

function HideCtrls()
{
    document.getElementById("cph1_divSear").style.setAttribute('display', '')
    if (document.getElementById("cph1_txtSearch"))
    {
        document.getElementById("cph1_txtSearch").style.setAttribute('display', 'none')
        document.getElementById("cph1_txtkey").style.setAttribute('display', 'none')
        document.getElementById("cph1_hypProjNo").style.setAttribute('display', 'none')
        document.getElementById("cph1_ddlSeaSingle").style.setAttribute('display', 'none')
         document.getElementById("cph1_txtSeaStart").style.setAttribute('display', 'none')
        document.getElementById("cph1_txtSeaEnd").style.setAttribute('display', 'none')
        document.getElementById("cph1_txtSeFLike").style.setAttribute('display', 'none')
        document.getElementById("cph1_imgSeaSt").style.setAttribute('display', 'none')
        document.getElementById("cph1_txtSeTLike").style.setAttribute('display', 'none')
        document.getElementById("cph1_imgSeaEnd").style.setAttribute('display', 'none')
        document.getElementById("cph1_txtPersonnel3").style.setAttribute('display', 'none')
        document.getElementById("cph1_ImageButton3").style.setAttribute('display', 'none')
        document.getElementById("likeFID").style.setAttribute('display', 'none')
        document.getElementById("likeTID").style.setAttribute('display', 'none')
        document.getElementById("dtFID").style.setAttribute('display', 'none')
        document.getElementById("dtTID").style.setAttribute('display', 'none')
    }
}

<div id="divSear" runat="server" class="cols4Search">
                            <span>
                                <asp:TextBox ID="txtSearch" runat="server" Width="350px"></asp:TextBox>
                                <asp:TextBox ID="txtkey" runat="server" onblur="ClearHelp()" onfocus="JavaScript:showhelp('Search_1001')"
                                    Width="400px" MaxLength="150"></asp:TextBox></span> <span style="display: none;">
                                        <asp:HyperLink ID="hypProjNo" runat="server" Target="_blank" ForeColor="Blue">View</asp:HyperLink>
                                    </span><span>
                                        <asp:DropDownList ID="ddlSeaSingle" runat="server" AutoPostBack="True">
                                        </asp:DropDownList>
                                    </span><span id="likeFID">>=<asp:TextBox ID="txtSeFLike" runat="server" MaxLength="9"></asp:TextBox></span>
                            <span id="likeTID"><=<asp:TextBox ID="txtSeTLike" runat="server" MaxLength="9"></asp:TextBox></span>
                            <span id="dtFID">>=<asp:TextBox ID="txtSeaStart" runat="server" Width="85px"></asp:TextBox></span>
                            <span>
                                <asp:ImageButton ID="imgSeaSt" runat="server" CssClass="dateicon" ImageUrl="~/Images/date_icon.png" /></span>
                            <span id="dtTID"><=<asp:TextBox ID="txtSeaEnd" runat="server" Width="85px"></asp:TextBox></span>
                            <span>
                                <asp:ImageButton ID="imgSeaEnd" runat="server" CssClass="dateicon" ImageUrl="~/Images/date_icon.png" /></span>
                            <span>
                                <asp:TextBox ID="txtPersonnel3" runat="server" CssClass="textbox" onblur="ClearHelp()"
                                    Width="160px" onfocus="JavaScript:showhelp('AdminUserDetails_1001')"></asp:TextBox></span>
                            <span>
                                <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Images/searchtool.png"
                                    ToolTip="Select User" CssClass="iconalign" /></span>
                            <br />
                            <asp:Label ID="lblNote" Visible="false" CssClass="Notelabel" runat="server" />
                        </div>

Can it be done without javascript also??? Please help me out…
Thanks

2

You won’t be able to prevent the flash using JavaScript. The reason being, the controls are marked as visible when the page is loaded, then your javascript is running.

So, your page loads, controls are visible
Now your javascript runs, your controls are set to hide.

You will need to add style=“display:none” to each of the controls you expect to hide to prevent the flashing, however, this also means your javascript is meaningless now (or could be).

Another alternative is to mark the control Visible property to false, and invoke a postback event for each drop down change, then setting the appropriate control’s Visible property to true.

3

Hi,

Thanks for the comeback…

Can i set all controls style to display:none on markup itself and show whatever i need accordingly using javascript?
Can you post a sample code snippet for this please?

4 

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
      $(function()
      {
        $('#div2').show();
        $('#lnkDiv3').click(function()
          {
            $('#div3').show();
          }
        );
      });
    </script>
  </head>
  <body>
    <div id="div1">This is show by default</div>
    <div id="div2" style="display:none">This is hidden by default, but is show when the page is loaded. <a href="#" id="lnkDiv3">Show div3</a></div>
    <div id="div3" style="display:none">This is hidden by default and only shown when the link in div2 is clicked.</div>
  </body>
</html>

See the above code demonstration.