javascript - Show spinner and disable page while waiting for ajax request - Stack Overflow

admin管理员组

文章数量:1186086

I have a project in which I use MVC C#, with Bootstrap and FontAwesome.

My objective is to show a spinner and disable the page while waiting for an ajax request.

So far, I have successfully acomplished this goal with the following code:

HTML:

<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
    <img src="~/Images/ajax-loader.gif">
</div>

JS:

function blablabla() {
            //show spinner, disable page
            var modal = $('<div>').dialog({ modal: true });
            modal.dialog('widget').hide();
            $('#ajax_loader').show();

            $.ajax({
                type: "Get",
                url: url,
                success: function (result) {
                   alert("success! " + result);
                },
                error: function(result) {
                    alert("error!" + result);
                },
                complete: function () {
                    //back to normal!
                    $('#ajax_loader').hide();
                    modal.dialog('close');
                }
            });
        }

Now, this code works, I have the page disabled and I show a spinner. However, this spinner is also grayed out, and I do not want that to happen.

How can I prevent this bug ?

I have a project in which I use MVC C#, with Bootstrap and FontAwesome.

My objective is to show a spinner and disable the page while waiting for an ajax request.

So far, I have successfully acomplished this goal with the following code:

HTML:

<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
    <img src="~/Images/ajax-loader.gif">
</div>

JS:

function blablabla() {
            //show spinner, disable page
            var modal = $('<div>').dialog({ modal: true });
            modal.dialog('widget').hide();
            $('#ajax_loader').show();

            $.ajax({
                type: "Get",
                url: url,
                success: function (result) {
                   alert("success! " + result);
                },
                error: function(result) {
                    alert("error!" + result);
                },
                complete: function () {
                    //back to normal!
                    $('#ajax_loader').hide();
                    modal.dialog('close');
                }
            });
        }

Now, this code works, I have the page disabled and I show a spinner. However, this spinner is also grayed out, and I do not want that to happen.

How can I prevent this bug ?

• javascript
• jquery
• html
• ajax

Share Improve this question Follow edited Apr 8, 2015 at 10:22 Flame_Phoenix asked Apr 8, 2015 at 10:16 Flame_PhoenixFlame_Phoenix 17.6k4040 gold badges143143 silver badges281281 bronze badges 9

• Move the spinner outside of #ajax_loader – Rory McCrossan Commented Apr 8, 2015 at 10:17
• I don't get it. Where do I put it then? The div#ajax_loader is the spinner – Flame_Phoenix Commented Apr 8, 2015 at 10:19
• 2 try giving z-index for #ajax_loader – Deepak David Commented Apr 8, 2015 at 10:26
• 1 Sorry my English is bad and i don't know what do you mean with "the spinner is grayed out". Do you mean your spinner looks like disabled as well? If is that, put a z-index to #ajax_loader – nada Commented Apr 8, 2015 at 10:26
• 1 try with <div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;z-index:999;"> – jogesh_pi Commented Apr 8, 2015 at 10:29

 |  Show 4 more comments

2 Answers 2

Sorted by: Reset to default 20

So, after a long search, I came up with my own solution:

This is the modal with the spinning wheel, or progress bar, or anything you want to. It is in a partial file called "_WaitModal"

<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-header">
        <h1>Please Wait</h1>
    </div>
    <div class="modal-body">
        <div id="ajax_loader">
            <img src="~/Images/ajax-loader.gif" style="display: block; margin-left: auto; margin-right: auto;">
        </div>
    </div>
</div>

I use @Html.Partial("_WaitModal") in the view to integrate it (but not show it).

Then, when I want to show it, I use:

$('#pleaseWaitDialog').modal();

and to hide it:

$('#pleaseWaitDialog').modal('hide');

I hope this helps other people as well!

try this..

Html

<button>Click Me</button>
<div class="ajax_loader hidden"><i class="fa fa-spinner fa-spin"></i></div>

CSS

body{
    position:relative;
}
.hidden{
    display:none;
}
.ajax_loader{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:rgba(0,0,0,.5);
}
.ajax_loader i{
    position:absolute;    
    left:50%;
    top:50%;
}

Script

$("button").click(function () {
    $(".hidden").show();
});

Fiddle Demo

本文标签： javascriptShow spinner and disable page while waiting for ajax requestStack Overflow