Как показать индикатор загрузки во время Ajax запроса?
Нужно показать индикатор загрузки во время Ajax запроса. Само окно, в котором вводятся данные запроса формируется так:
function showFeedback(id) {
var panelId = 'feedback-modal';
var updatePanel = $('#' + panelId + ' .modal-body').eq(0);
var OkMetod = $("#feedback-modal").modal;
$("#feedback-modal-title").html('Обратный звонок');
$.ajax({
type: "POST",
url: "/Ajax/GetFeedback",
data: {
//type: 'Product',
//id: FirmId
}
}).done(function (data) {
consolelog("done");
updatePanel.html(data);
setModalSubmit(panelId, OkMetod, 'hide');
$("#feedback-modal").modal('show');
$("#FormID").val(id);
}).fail(function (data) {
consolelog("False", data);
});
};
Сама функция вызывается по кнопке:
<a id="feedbackButton" href="javascript:showFeedback(2);">Some text</a>
Сама страница, которая формируется:
@model InfoPortal.Domain.Models.FeedBackAntiSpam
<div class="row" style="text-align:left;">
<div class="col-lg-12">
<form id="purchaseLotAddForm" asp-area="" asp-controller="Ajax" asp-action="FeedbackCreate" method="post" enctype="multipart/form-data" style="">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row edit-flex-form">
<div class="col-lg-12">
<input type="hidden" asp-for="Type">
<input type="hidden" asp-for="FormID">
<div class="form-group row">
<div class="col-12">
<input asp-for="Name" class="form-control" placeholder="Имя" autocomplete="off">
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<input asp-for="Phone" class="form-control" placeholder="Номер телефона" type="tel" autocomplete="off">
<span asp-validation-for="Phone" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<input asp-for="Email" class="form-control" placeholder="Email" type="email" autocomplete="off">
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<textarea asp-for="Description" class="form-control" placeholder="Комментарий" onkeyup="javascript:countmeFB();"></textarea>
<span asp-validation-for="Description" class="text-danger"></span>
</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input asp-for="Confirmation" class="form-check-input" /> Согласен с <a href="/privacy">Политикой конфиденциальности</a> и <a href="/termsofuse">Пользовательским соглашением</a>
</label>
</div>
</div>
<div class="modal-footer" style="width: 100%;">
@*<a class="button btn-secondary" asp-controller="Catalog" asp-action="Cart">
Отправить
</a>*@
<button type="submit" name="btSave_f" class="button btn-secondary" id="btnSV" style="margin-right: 20px; @(Model?.Confirmation == true ? "" : "display: none;" )">Отправить</button>
<button type="button" name="btCancel" class="button btn-primary" data-dismiss="modal">Отмена</button>
</div>
</div>
@*<div class="form-group text-center">
<button type="submit" class="btn btn-primary">Применить фильтр</button>
</div>*@
</form>
</div>
</div>
@*Antispam*@
<script type="text/javascript">
var ct = 0;
var addCount = document.createElement('input');
addCount.type = "hidden";
addCount.id = "PressingCountFeedback";
addCount.name = "PressingCountFeedback";
addCount.value = "0";
document.getElementById('purchaseLotAddForm').appendChild(addCount);
function countmeFB() {
document.getElementById('PressingCountFeedback').value = ++ct;
}
</script>
<script>
var btSave_f = $('button[name ="btSave_f"]').eq(0);
var checkboxValidate = $('input[name ="Confirmation"]').eq(0);
checkboxValidate.change(function () {
if ($(this).is(':checked')) {
btSave_f.show();
}
else {
btSave_f.hide();
}
});
</script>