Question

18

Show spinner and disable page while waiting for ajax request

rated 0 times [ 24] [ 6] / answers: 1 / hits: 46780 / 9 Years ago, wed, april 8, 2015, 12:00:00

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 ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

isaac

Add To Favorites

Follow

Total Points: 645

Total Questions: 109

Total Answers: 96

Location: Cayman Islands

Member since Fri, Mar 4, 2022

2 Years ago

answered 9 Years ago chauncey · Accepted Answer

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!