Home/ Questions/Q 7904713
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T10:11:58+00:00

I have server side controls like textbox, dropdownlsit etc on aspx page and my

  • 0

I have server side controls like textbox, dropdownlsit etc on aspx page and my objective is to hide them during page load.

With the below code, the controls are being hidden during page load, but i notice flickering. The desired output should eliminate this control flickering. Any help is greatly appreciated.

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Hide all the controls on server, show them on client when required this way you will not have the problem of hiding controls after being shown for while

    In HTML 

     <asp:TextBox ID="txtSearch" style="display:none" Visible="False" Width="350px"></asp:TextBox>

    or In Code Behind

     txtSearch.Attributes.Add("style", "display:none"); = "false";

    and Show them in javascript when required

    if (document.getElementById("cph1_txtSearch"))
{
    document.getElementById("cph1_txtSearch").style.setAttribute('display', 'block')
    //Similarly you can show all field which are required to be shown
    // .........
}
    • 0