Показать spinner и отключить страницу во время ожидания запроса ajax

у меня есть проект, в котором я использую MVC C#, с Bootstrap и FontAwesome.

моя цель-показать счетчик и отключить страницу во время ожидания AJAX-запрос.

до сих пор я успешно выполнил эту цель со следующим кодом:

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');
                }
            });
        }

теперь этот код работает, у меня отключена страница, и я показываю счетчик. , этот счетчик также серым, и я не хочу, чтобы это произошло.

Как я могу предотвратить эту ошибку ?

6
ajax html javascript jquery

2 ответов

Итак, после долгих поисков я придумал свое собственное решение:

это модальный с прялкой, или прогресс-бар, или все, что вы хотите. Он находится в частичном файле под названием "_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>

Я использую @Html.Partial("_WaitModal") в целях интеграции (но не показывать).

тогда, когда я хочу показать его, я использую:

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

и, чтобы скрыть это:

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

Я надеюсь, что это помогает и другим людям!

9

попробуйте это..

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%;
}

скрипт

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

Скрипка Демо

3