async ajax call - show loading gif

Question

I'm using ajax to call a POST method in my controller. On average, this method runs between 15 and 20 seconds.

I'm using aync false in that call because I need to wait the answer to know which way to go. But, when i using async false my loading (gif) isn't showed.

$(document).ajaxStart(function() {
    $('#overlay').show();    
});

$(document).ajaxStop(function() {
    $('#overlay').hide();
});

What is the best way to resolve it?

EDIT 1

I have the save function that performs multiple validations and calls the method in the controller:

function salvarInformacoes(pedidos, ums, callback) {
    $.ajax({
        url: 'PlanoCortes/SalvarInformacoes',
        type: 'POST',
        data: {
            sglDeposito: $("#ddl-Deposito option:selected").text(),
            codUnimetPCP: $('#ddl-Um-sip').val(),
            numEtapa: $("#ddl-Operacao").val(),
            rotinaUM: $('#chk-Rotina-UM').is(":checked"),
            dscEtapa: $("#ddl-Operacao option:selected").text(),
            dadosPedidosJson: pedidos,
            dadosUMsJson: ums,
            corteVirtual: corteVirtual
        },
        success: callback
    });
}

function salvar() {
  var resultado = false;
  ...
  salvarInformacoes(JSON.stringify(pedidos), JSON.stringify(ums), myCallback);
  
  function myCallback(retorno) {
      if (retorno.success != false) {
          ...
      }
      else {
          resultado = false;
          return;
      }

      resultado = true;
  }
  
  return resultado;
}
  ...

Before the method "myCallback" is called, the function return false. In this way, the code inside the statement below is never executed:

if (salvar()) {
  ...
}

score 1 · Accepted Answer · edited May 23 '17 at 12:09

1

What is the best way to resolve it?

Don't use async: false.

The browser doesn't show the changes because async: false makes the operation not asynchronous and locks the browser. Keep asynchronous code asynchronous and you can do other things while that code is executing.

I need to wait the answer to know which way to go.

This is the result of a design flaw somewhere in the code. You might try looking through the question and answers here for some help. Essentially you don't want to block the client-side code while waiting for the response, but instead want to handle the response when it arrives.

edited May 23 '17 at 12:09

Community

1
1

answered Feb 20 '17 at 18:05

David

208,112
36
198
279

Thanks for the answer. I'm studying the post. I do not understand yet what can I do when my call is into loop (for). I'ts possible to do it without async? – Carlos Henrique Biazin Esteves Feb 20 '17 at 18:35
@CarlosHenriqueBiazinEsteves: Well, since there's no information here about what you're trying to do, I can't really tell you how to do it. But for the question being asked, the answer is that you're blocking the browser from continuing which is why it's not continuing to the next operation. In a general sense this is a very poor design (which is why you've encountered this issue) and shouldn't be used in the first place. – David Feb 20 '17 at 18:37
@CarlosHenriqueBiazinEsteves: What you're asking now is an exact duplicate of this: http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call You can't examine the result of an asynchronous operation *immediately*, because that operation might not yet have completed. The answers in that question go into great detail about how to respond to an asynchronous operation, which is structurally fundamentally different than "returning" from a function (which is what you currently try to do). In its current structure, `salvar()` will *always* return false. – David Feb 20 '17 at 19:41
Thaks for the post. I got it. – Carlos Henrique Biazin Esteves Feb 21 '17 at 11:24

async ajax call - show loading gif

1 Answers1