.show() .hide() and ajax call

Question

I have a js function in my .cshtlm form, witch I call it from a button.
My function hide the button, show a progress bar, call 2 ajax, hide the progress bar and finally shows a message.
JS Function code

var CustomsBook = function () {
 var month = $("#month").val();
 var message = "";
 var errorMessage = "";
 $("#btn").hide();
 $("#prcs").show();
 $("#progressbar").show();
 $("#successMessage").empty().hide();
 $("#dangerMessage").empty().hide();
 $.ajax({
  async: false,
  url: "/Logistics/jCustomsBookHQ",
  type: "POST",
  data: { month: month },
  success: function (HQresponse) {
   if (HQresponse.success) { message += HQresponse.message; }
   else { errorMessage += HQresponse.message; }
  }
 });
 $.ajax({
  async: false,
  url: "/Logistics/jCustomsBookBr",
  type: "POST",
  data: { month: month },
  success: function (BRresponse) {
   if (BRresponse.success) {
    if (message.length > 0) { message += " <br> "; }
    message += BRresponse.message;
   }
   else {
    if (errorMessage.length > 0) { errorMessage += " <br> "; }
    errorMessage += BRresponse.message;
   }
  }
 });
 $("#prcs").hide();
 $("#progressbar").hide();
 $("#successMessage").html(message);
 if (message.length > 0) {
  $("#successMessage").show();
 }
 $("#dangerMessage").html(errorMessage);
 if (errorMessage.length > 0) {
  $("#dangerMessage").show();
 }
}

When I push the button to call the function the $("#prcs").show(); and $("#progressbar").show(); doesn't work. If I use a debugger and run step by step the code the proggress bar shows up and hide after the ajaxs end.
I try to write 2 different function one for every ajax and replace the ajax code with call to the functions with the same result.
Do I miss something?
Thanks in advance for every help.

You *really* need to read the formatting instructions next to the question editor. Your code is currently an unreadable mess. I suspect the problem is that you used `async: false`. There should be a warning in your browser's developer tools that that is deprecated. The behaviour you are seeing is why. Don't do that. — Quentin, Sep 15 '20 at 12:41
Possible duplicate: https://stackoverflow.com/questions/28680897/jquery-ajax-async-false-causes-a-strange-warning — Quentin, Sep 15 '20 at 12:42

David · Answer 1 · 2020-09-15T12:53:39.060

Remove this:

async: false,

Your browser should be giving you a warning message on the debugging console about that functionality being deprecated. But more to the point, you're explicitly telling the browser to perform asynchronous operations synchronously, all on a single thread. Which means the UI can't update until all of those operations complete.

Allow your asynchronous operations to be asynchronous so the UI can update during the operations. Anything that needs to happen after those operations should be invoked in their callbacks, not just placed below them in the code.

In short, async: false is a crutch you don't need, don't want, and should avoid entirely. Whatever problem you may have tried to solve by using it wasn't solved, it was just obscured by a new problem.

Edit: Specifically in your code, all of this should be in the success handler function, not after the $.ajax() call:

$("#prcs").hide();
$("#progressbar").hide();
$("#successMessage").html(message);
if (message.length > 0) {
  $("#successMessage").show();
}
$("#dangerMessage").html(errorMessage);
if (errorMessage.length > 0) {
  $("#dangerMessage").show();
}

For example:

$.ajax({
  url: "/Logistics/jCustomsBookBr",
  type: "POST",
  data: { month: month },
  success: function (BRresponse) {
    if (BRresponse.success) {
      if (message.length > 0) { message += " <br> "; }
      message += BRresponse.message;
    } else {
      if (errorMessage.length > 0) { errorMessage += " <br> "; }
      errorMessage += BRresponse.message;
    }
    $("#prcs").hide();
    $("#progressbar").hide();
    $("#successMessage").html(message);
    if (message.length > 0) {
      $("#successMessage").show();
    }
    $("#dangerMessage").html(errorMessage);
    if (errorMessage.length > 0) {
      $("#dangerMessage").show();
    }
  }
});

if I remove the ```async: false``` it just hide the button, won't show the progress bar nor the message — Bouros Ioannis, Sep 15 '20 at 12:49
@BourosIoannis: Because you immediately hide it after showing it. All of the code that's after the `$.ajax()` call should be at the end of the `success` function, so it executes when the AJAX call completes. — David, Sep 15 '20 at 12:50

score 0 · Accepted Answer · answered Sep 15 '20 at 12:52

0

If you want something to show after you click the button, and the button is triggering an ajax request, then put the code below within the success: function (BRresponse) { brackets, instead of outside the ajax request.

 $("#prcs").hide();
 $("#progressbar").hide();
 $("#successMessage").html(message);
 if (message.length > 0) {
  $("#successMessage").show();
 }
 $("#dangerMessage").html(errorMessage);
 if (errorMessage.length > 0) {
  $("#dangerMessage").show();
 }

answered Sep 15 '20 at 12:52

Johnny

9,725
5
29
34

Thanks you, I'll try that and also will make 1 ajax call and in that call I'll run both my oracle function from the controller – Bouros Ioannis Sep 15 '20 at 12:57

.show() .hide() and ajax call

2 Answers2