Загрузчик не отображается при вызове AJAX

Question

У меня есть функция JavaScript, которая выполняет AJAX-вызов для возврата некоторых данных, этот вызов запускается при событии изменения списка выбора.

Я пробовал много способов отобразить мой загрузчик, пока он ждет, поскольку в настоящее время он останавливает список выбора и выглядит не очень хорошо с точки зрения клиента.

Проблема в том, каким образом я пытался показать это, вызов AJAX завершается до того, как загрузчик показывает.

Текущий код:

<select name="addresslist" class="form-select" id="edit-addresslist" onchange="selectAddress(this)">
<option value="none">-- Please select an address from the list below --</option>
//there are more options but this isn't important here       
</select>

Файл JS

function selectAddress(data) {
var loader = document.getElementbyId('overlay-loader');
var selectedAddress = data.value;
var uprn = selectedAddress.split(',')[1];

loader.style.display = "block";

$.ajax({
    url: '~/collectiondates',
    async: false,
    data: {
        uprn: uprn
    },

    success: function (data) {

        result = data;
}

Это один из способов, которые я пробовал, я также пытался вызвать отдельную функцию на "Событие onchange, отдельная функция внутри selectAddress и другая функция, которая показывает, что загрузчик затем вызывает «selectAddress», но ничего не работает, функция AJAX всегда сначала выполняется, а затем показывает загрузчик (когда он больше не нужен).

Остальная часть кода работает точно так, как ожидалось.

Спасибо.

Answer 1

Привет, вам следует использовать отложенные обещания, в том числе выполненные, сбои и всегда с вашим ajax-вызовом и даже settimeout, если запрос такой быстрый, проверьте пример, который я сделал в этом jsfiddle , также здесь приведен пример синтаксиса :

$( function() {
  function AjaxCall(rID,rStatus,rComment){
    return $.ajax({
      url: 'request.php',
      data: {
        id: rID,
        requisitionStatus: rStatus,
        comment: rComment    
      },
      type: "POST",
      cache: false,
      beforeSend: function() {
        $("#requisitionStatusDialog").dialog('close');
        $('#ajax_loader_my').show();
      }
    })
  }


  $( "#requisitionStatusDialog" ).dialog();

  $("#yourbuttonInputId").on('click',function(event) {
    AjaxCall().done(function(data,response){
      var obj = JSON.parse(data);
      if (obj.status == "success") {
        alert('whe are on done!');
      }
    }).fail(function(data,response){
      $("#updateDialog").dialog(' close');
    }).always(function(data){
      if(confirm('You have finished the request.  Click OK if you wish to continue ,click Cancel to reload the page.'))
      {
        $('#ajax_loader_my').hide();
        $("#requisitionStatusDialog").dialog('open');
      }else{
        location.reload();
      }

    });
  });
} );

Надеюсь, это поможет =)

Answer 2

Вероятно, это будет показано позже, потому что вы не настраиваете css, чтобы скрывать после возвращения success / error. Если вас беспокоит, что загрузчик не будет отображаться до завершения ajax, вы можете установить задержку вызова AJAX с помощью функции setTimeout Вот что я делаю. HTML -

<select name="addresslist" class="form-select" id="edit-addresslist" onchange="selectAddress(this)">
<option value="none">-- Please select an address from the list below --</option>
//there are more options but this isn't important here       
</select>

JS / JQ -

function selectAddress(data) {
openloader();
var selectedAddress = data.value;
var uprn = selectedAddress.split(',')[1];

$.ajax({
    url: '~/collectiondates',
    async: false,
    data: {
        uprn: uprn
    },

    success: function (data) {
        closeloader();
        result = data;
    }
 }
 }

function openloader(){
    $("#overlay-loader").show();
}

function closeloader(){
    $("#overlay-loader").hide();
}

Answer 3

Вы можете попробовать поместить код AJAX в функцию setTimeout, если бэкэнд работает слишком быстро.

setTimeout(function(){
    // put here your AJAX
}, 2000); // 2 seconds delay