Question

I have a Razor/ASP/MVC3 web application with a form and a Submit button, which results in some action on the server and then posts back to the form. There is often some delay, and it’s important that users know they should wait for it to complete and confirm before closing the page or doing other things on the site, because it seems users are doing that and sometimes their work has not been processed when they assume it has.

So, I added a “Saving, Please Wait…” spinner in a hidden Div that becomes visible when they press the Submit button, which works very nicely, but I haven’t been able to find a way to get the Div re-hidden when the action is complete.

My spinner Div is:

<div id="hahuloading" runat="server">
  <div id="hahuloadingcontent">
    <p id="hahuloadingspinner">
        Saving, Please Wait...<br />
        <img src="../../Content/Images/progSpin.gif" />
    </p>
  </div>
</div>

Its CSS is:

#hahuloading
{
    display:none;
    background:rgba(255,255,255,0.8);
    z-index:1000;
}

I get the “please wait” spinner to appear in a JS method for the visible button, which calls the actual submit button like this:

    $(document).ready(function () {
        $("#submitVisibleButton").click(function () {
            $(this).prop('disabled', true);
            $("#myUserMessage").html("Saving...");
            $("#myUserMessage").show();
            $("#hahuloading").show();
            document.getElementById("submitHiddenButton").click();
        });
    });

And my view model code gets called, does things, and returns a string which sets the usermessage content which shows up fine, but when I tried doing some code in examples I saw such as:

        // Re-hide the spinner:
        Response.write (hahuloading.Attributes.Add("style", "visibility:hiddden"));

It tells me “hahuloading does not exist in the current context”.
Is there some way I am supposed to define a variable in the view model which will correspond to the Div in a way that I can set its visibility back from the server’s action handler?
Or, can I make the div display conditional on some value, in a way that will work when the page returns from the action?
Or, in any way, could anyone help me figure out how to get my div re-hidden after the server action completes?

Thanks!

Answer 1

Is this done with ajax? I would assume so because the page is not being redirected. Try this:

$(document).ready(function () {
    $("#submitVisibleButton").click(function () {
        $(this).prop('disabled', true);
        $("#myUserMessage").html("Saving...");
        $("#myUserMessage").show();
        $("#hahuloading").show();
        document.getElementById("submitHiddenButton").click();
    });
    $("#hahuloading").ajaxStop(function () {
     $(this).hide();
    });
});

As an aside, you no longer need runat=server.