Question 246904 in ASP.NET Question posted in
The official documentation can be found here.

Asp.net – loadingDiv doesnt show up

i have a div here for loadingDiv

 <div id="loadingDiv" runat="server" visible="false"><div class="lds"><div></div><div></div><div></div></div></div>

and also my button here

<asp:LinkButton ID="btnNew" runat="server" CssClass="btnAgent2" Width="150px"
OnClick="btnNew_Click"><span class='<%=Resources.Resource.LangParam2%>'><%=Resources.Resource.NewSuperSenior%></span></asp:LinkButton>

and here is my backend code.

        protected void btnNew_Click(object sender, EventArgs e)
        {
            loadingDiv.Visible = true;
            Response.Redirect("../_SH1/SSSet.aspx");
        }

Im hoping for the loadingDiv to show and load to the next webpage but it doesnt work

i’ve tried using

    <div id="loadingDiv" runat="server" display:"none"><div class="lds"><div></div><div></div><div></div></div></div>

and

        protected void btnNew_Click(object sender, EventArgs e)
        {
            HtmlGenericControl loadingDivControl = (HtmlGenericControl)FindControl("loadingDiv");

            loadingDivControl.Style["display"] = "block"; // Show the control

            Response.Redirect("../_SH1/SSSet.aspx");
        }

but it still doenst work.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you. I have made a function for loadingDiv in the frontend and made an onclientclick to call it aside with onclick; it works.

    Here's my solution.

    I made a function called showCreate() with the loadingDiv inside.

    function showCreate() {
    $('body').append('<div id="loadingDiv"><div class="lds"><div></div><div></div><div></div></div></div>');
}

    And I added into here:

    <asp:LinkButton ID="btnNew" runat="server" CssClass="xxx" Width="150px"
OnClick="btnNew_Click" OnClientClick="showCreate();"> xxx </asp:LinkButton>

  2. 0

    Youll have to do use js for this, bellow is example i use ( works best using update panel ):

     function ShowLoadingSplash() {   
    window.top.$('[id*=pageLoadSplash]').removeClass('visually-hidden');
    window.top.$('[id*=main]').addClass('noclick');    
}

    i use window.top (could use document.) as pageLoadSplash and ‘main’ form are in sitemaster. the above will show my loading page from a button click and also prevent clicking on the main form… use this from a button click to start it: <asp:Button ID="BTN_New" CssClass="btn btn-warning" Height="40px" OnClick="BTN_New_OnClick" OnClientClick="ShowLoadingSplash();" runat="server" Text="add new" />

    i then have this js snippet to hide it:

     window.addEventListener('load',
     function () {
         HideLoadingSplash();
     });

function HideLoadingSplash() {
    try {
        window.top.$('[id*=pageLoadSplash]').addClass('visually-hidden');
            window.top.$('[id*=main]').removeClass('noclick');
    } catch (ex) {
       //console.log('error hiding');
    }

}

    this is a basic breakdown and a start, you might need a timeout in case automatically doesn’t hide, add js logic if from a update panel (on start / on complete updating) …

    Login or Signup to reply.
  3. 0

    There is an easy solution to this with a small amount of client-side code.

    Assuming jQuery is available?

    Then for a LinkButton, Button, Image button etc.?

    Such controls have both client side click events and server side click events.

    This "dual" client and server side click event for such buttons can be put to good use to solve this problem.

    The first issue is we "must" use style to hide the div. The reason is that with visible = false, then the server will not render, or even send that markup to the client side. As a result, no client-side JavaScript code can hide or show that div, since such markup was never sent to the browser in the first place.

    Using style to hide that div means the markup in that div is rendered but not displayed client side.

    So, we can now on button click:

     Display the hidden div
 Allow server-side button click to run.

    This then allows one to simply display the div when the button is clicked. The server-side code can take a long time to process.

    So, the above approach will work for a button click that runs code on the current page, and you want a wait message.
    Or that server-side code can navigate to another page.

    So, say this markup:

            <asp:LinkButton ID="btnNew" runat="server" CssClass="btnAgent2" 
            Width="150px"
            OnClick="btnNew_Click"
            OnClientClick="$('#loadingDiv').show();"                
             >Link  Button test
        </asp:LinkButton>


        <div id="loadingDiv" style="display:none" >
            <div class="lds">
                <div>
                    <h3>Loading please wait</h3>
                    <img src="../Content/wait2.gif" />
                </div>
                <div></div>
                <div></div>
            </div>
        </div>

    Example code behind with a simulated delay of long running code:

        protected void btnNew_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
    }

    So, the result is this:

    enter image description here

    So, in most case, you can just use the client side click event, and in most cases, you can use a jQuery expression to show the hidden div, and a separate function or routine is not required.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search