Pavan Puligandla Pavan Puligandla - 3 months ago 14
Javascript Question

Handle page controls in PageLoad using javascript

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>

Answer

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
    // .........
}