SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot pavanpuligandla's Avatar
    Join Date
    Sep 2008
    Location
    hyderabad
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

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

    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
    PHP Professional turned ASP.NET Professional

  2. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,072
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Zealot pavanpuligandla's Avatar
    Join Date
    Sep 2008
    Location
    hyderabad
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cpradio View Post
    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.
    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?
    PHP Professional turned ASP.NET Professional

  4. #4
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,072
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •