Utilize JavaScript to manage page controls during PageLoad

My ASPX page contains server-side controls like text boxes and dropdown lists that I want to hide during the page load process.

Although I have code in place to hide the controls when the page loads, I am experiencing flickering. I need assistance in achieving a smooth hiding effect for these controls. Any help would be greatly appreciated.

var isPostBack = false;

function pageLoad() {
    $(document).ready(function () {
        HideControls();
        //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>
javascript

Answer №1

To avoid the issue of hiding controls after they have been displayed for a while, one solution is to hide all controls on the server side and only show them on the client side when needed.

For example, in HTML:

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

Or in the Code Behind:

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

Then, you can use JavaScript to show the controls when required:

if (document.getElementById("cph1_txtSearch"))
{
    document.getElementById("cph1_txtSearch").style.setAttribute('display', 'block')
    // Additional code to show other required fields
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Validating Forms in AngularJS: Ensuring At Least One Input Field is Not Empty

Consider the following basic HTML form: <form name="myForm" action="#sent" method="post" ng-app> <input name="userPreference1" type="text" ng-model="shipment.userPreference" /> <input name="userPreference2" type="text" ng-model="shipm ...

javascripthtmlvalidationangularjs

Head over to the registration page if your login attempt is unsuccessful

I am currently working on developing a basic login page. The process involves users signing up on the register page first, and then attempting to log in. If the login credentials match with the database, they are directed to the homepage. However, if the u ...

javascriptphphtmlmysqldatabase

Manipulating the DOM using a Flask route in an HTML form

I have a form that allows users to input the names of "Player A" and "Player B". When the user clicks on the "Start Game" button, the game begins by redirecting to a Flask route (/players). I want the "player-text" section to be updated with the player nam ...

javascriptdomflask

Which option is more beneficial for intercepting API data in Angular 6: interfaces or classes?

My API returns JSON data that is not structured the way I need it, so I have to make changes. { "@odata.context":"xxxxxx", "id":"xxxxxxxx", "businessPhones":[ ], "displayName":"name", "givenName":"pseudo", "jobTitle":null, "ma ...

javascriptangulartypescriptclassinterface

Prevent reselection after model selection in AngularJS-chosen

Can someone assist me with this particular situation? I have implemented single-select dropdowns in a table where each row has its own dropdown. There are 2 options for changing the selection: Clicking on the deselect ('x') icon (works fine ...

javascriptangularjsjquery-chosenangular-chosen

Tips for replacing the values obtained during parsing an XML document

I am working with an XML file that contains category and product information. Here is a snippet of the XML data: <categories> <category id="2" name="Pepsi" > <products> <product id="858" name="7UP" price="24.4900" /> ...

javascriptjquery

In which specific part of the code is jQuery responsible for handling animations and timers within the `$.queue

Upon examining the source code of jQuery, particularly the queue() function, it was observed that the function simply places the function into the .data() object associated with that specific element: queue: function( elem, type, data ) { var q; i ...

javascriptjqueryanimation

ajax stops working due to issues with xmlHttp.readysate

Having recently started working with AJAX, I encountered an issue with my script. Here's the code snippet: var xmlHttp = createXmlHttpRequestObject(); function createXmlHttpRequestObject() { var xmlHttp; if(windows.ActiveXObject) { ...

javascriptphpajax

Setting up the Angular JS environment manually, without relying on an Integrated

I am a complete beginner when it comes to Angular JS. I recently inherited an Angular JS application that I need to run on a server without using any Integrated Development Environment (IDE). I have tried researching online for methods to run the applicat ...

javascriptjavaangular

Verify if the value of localStorage matches the specified value, then conceal the element

This is my second query and I'm hoping it covers everything. My knowledge of javascript is limited, which has made it difficult for me to get my code working properly. Despite trying various different approaches, I have been unable to resolve the issu ...

javascriptjqueryhtmlcss

How can JavaScript be used to toggle the visibility of text on a webpage

Can anyone help me with a problem I'm having toggling text? I have a truncated text and I want to be able to switch back and forth between the truncated text and the original text on button click. Here is a link to the pen. var myButton = documen ...

javascripthtmlcss

Spreadsheet Layout for my asp.net program

Is there a more efficient tool available for integrating Excel Grid into my asp.net application? I am looking for a tool that will allow me to edit columns similar to Excel and paste data directly into the grid. It should have the same features as Excel. ...

javascriptjqueryasp.netasp.net-mvc

What steps can be taken to address the error message "FATAL: Unable to load template" encountered while using

I'm encountering the issues documented here and here on GitHub. I'm working on incorporating documentation for my Next.js code, and below is my jsdoc configuration file. { "tags": { "allowUnknownTags": true, "di ...

javascriptnode.jsreactjsnext.jsjsdoc3

Utilizing a form of delegation design in JavaScript

My goal is to pass data from class A to class B after receiving a message from sockets. Here's a simplified overview of how the classes are defined: In class A: export default class A { client; callbacks; constructor() { this.callbacks = ...

javascriptnode.jscallback

Using the Promise function with callback to map the JSON payload object into an object

I received a JSON payload with the following structure: { "name": "Reports", "subject": "Monthly Reports", "attachments":[ { "attachment":{ "name": "Month1.pdf", "type": "application/pdf", "path": "h ...

javascriptnode.jstypescript

Tips for refreshing innerHTML without altering the entire content

I've written a JavaScript code that uses AJAX to periodically send an XMLHttpRequest to fetch data from a PHP file. The data retrieved is then added to the innerHTML of a <p> tag. However, every time new content is added, the entire paragraph se ...

javascripthtmlajax

Response from the controller upon choosing a value from the selection dropdown

Scenario: In this scenario, there are two tables in consideration: Firm table : ID (string), Firm(string) Firms table: FirmID(string FK), Name(string) The goal is to select a value from the Firm table, pass it to the controller as Firm, and then execut ...

javascriptc#angularjsasp.net-web-api

Chrome console displaying error in vanilla JavaScript: 'Unable to set property of undefined'

Hello, I am a newcomer to chartjs and JavaScript in general. I keep encountering the error "cannot set property of undefined" in the Chrome console. const dataPie = { labels: ['Good Packs', 'Bad Packs'], datasets: [{ la ...

javascriptarrayschart.js

Integrate the perfect-scrollbar jQuery plugin into RequireJS

Recently, I decided to explore RequireJS for my projects but I am still trying to understand its functionalities. I'm currently attempting to incorporate perfect-scrollbar, specifically the jQuery version, into my work. Here's a snippet from my ...

javascriptjqueryrequirejs

Can you provide a tutorial on creating a unique animation using jQuery and intervals to adjust background position?

I am attempting to create a simple animation by shifting the background position (frames) of the image which serves as the background for my div. Utilizing Jquery, I aim to animate this effect. The background image consists of 6 frames, with the first fr ...

javascriptjquerycsssetinterval