MVC JQuery Ajax忙指示符覆盖在窗体上

Question

I have created a simple form which is submitted using JQuery Ajax and works very well. What I am trying to achieve is that a busy indicator "loader image" is displayed on the entire form as an overlay. I have seen many example but most of them are related to show and hide a simple div containing the image and it doesn't act as overlay on the form. What I have achieved so far is to just show the loading indicator on the center of the screen with the help of css. Below is code for my div and css for it.

<div id="spinner">
    <img src="@Url.Content("~/images/loader.gif")" alt="Please wait...">
</div>

and here is the css,

<style>
  div#spinner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    background: url(spinner.gif) no-repeat center #fff;
    text-align: center;
    padding: 10px;
    font: normal 16px Tahoma, Geneva, sans-serif;
    border: 1px solid #666;
    margin-left: -50px;
    margin-top: -50px;
    z-index: 2;
    overflow: auto;
  }
</style>

Ajax call might not be important in this scenario but I will put just in case it is needed,

$(function () {
    $('#RegisterForm').submit(function () {
        if ($(this).valid()) {
            $("div#spinner").fadeIn("fast");
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $("div#spinner").fadeOut("fast");
                    $("div#result").html(result);
                }
            });
        }
        return false;
    });
});

Now as I said with this code the loader image is displayed on the center of screen but it is not overlay. But I want the loader image to be overlayed on the form only. But it should adjust itself according to form size on runtime because I am not specifying any height. Is this achievable? If yes then how?

Answer 1

What's a little weird is that you have loader.gif and also spinner.gif... I'm guessing you are purposely using both for a reason. I'll take that into account. I'm assuming #spinner is a child of #RegisterForm. If that's the case you could have the styles be as follows:

<style>
    #RegisterForm {
        display: block;
        position: relative;
    }
    #spinner {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        background: url(spinner.gif) no-repeat center #fff;
        padding: 10px;
        font: normal 16px Tahoma, Geneva, sans-serif;
        border: 1px solid #666;
        z-index: 2;
        opacity: 0.75;
    }
</style>

What this does is stretch out the spinner DIV to cover all of the #RegisterForm. I also added the opacity so you can see how it's overlayed. The JavaScript looks fine and should do the trick.

Answer 2

I have found another solution which is simple enough for me and works out of the box. The solution is to use jQuery.BlockUI. It can not only block the whole page but also can block any element on the page. The css is rendered by default but css can be changed if desired. I have added the package from NuGet. Added the reference file and updated my Ajax call like this,

$(function () {
    $('#RegisterForm').submit(function () {
        if ($(this).valid()) {
            $("#RegisterForm").block({
                message: '<img src="@Url.Content("~/images/loader.gif")" alt="Please wait...">',
                css: { width: '4%', border: '0px solid #FFFFFF', cursor: 'wait', backgroundColor: '#F2F2F4' },
                overlayCSS: { backgroundColor: '#FFFFFF', opacity: 0.5, cursor: 'wait' }
            });
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $("#RegisterForm").unblock();
                    $("div#result").html(result);
                }
            });
        }
        return false;
    });
});

It works like a charm. I can change the background and loading image too. So if anyone is looking for the same solution then this might be helpful.