execution out of order inside ajax callback function javascript

Question

I have a following ajax operation that is intended to (1) show spinner gif before sending ajax request, and after after the request is complete, (2) hide the gif and 3 display appropriate alert messages. Finally (4) reload the page.

Here's the code:

$.ajax({
   url: rUrl,
   data: {
      id: rID,
      requisitionStatus: rStatus,
      comment: rComment
   },
   type: "POST",
   cache: false,
   beforeSend: function() {
      $("#requisitionStatusDialog").dialog('close');
      $('#ajax_loader_my').show();
   },
   success: function(data, resp) {
      var json = data;
      var obj = JSON && JSON.parse(json) || $.parseJSON(json);
      if (obj.status == "success") {
         alert('Success! ' + obj.message);
         location.reload();
      } else if (obj.status == "error") {
         alert('Error!' + obj.message);
      }
   },
   error: function(data, resp) {
      $("#updateDialog").dialog('close');
      console.log(resp);
   },
   complete: function() {
      $('#ajax_loader_my').hide();
   }
});

But in this case, alert pops up first while the spinner gif still shows up, and reloads the page after clicking OK.

I even tried hiding the gif in success callback itself instead of using complete:

success: function(data, resp) {
  var json = data;
  var obj = JSON && JSON.parse(json) || $.parseJSON(json);
  if (obj.status == "success") {
     $('#ajax_loader_my').hide();
     alert('Success! ' + obj.message);
     location.reload();
  } else if (obj.status == "error") {
     alert('Error!' + obj.message);
  }

},

Both gives the same result.

write $('#ajax_loader_my').hide(); at the starting of the success function and then try — RK_15
– RK_15, Commented Mar 14, 2019 at 11:39
Use $('#ajax_loader_my')[0].style.display = "none" and then try — RK_15
– RK_15, Commented Mar 14, 2019 at 11:48
@Azima, Please try my updated answer. Instead of alerts, try to use some inline html to display the success or error, or may be log into console. — Khurram Ishaque
– Khurram Ishaque, Commented Mar 14, 2019 at 14:19

TrevTheDev · Accepted Answer · 2019-03-14 12:02:01Z

2

The reason your alert pops up before the spinner is hidden is the success code runs before complete which hides the spinner. The reason it reloads is because after the alert you send location.reload();

Check that $('#ajax_loader_my').hide(); is actually hiding the spinner. The element that is or contains the spinner in your html must be have its id set to ajax_loader_my.

If you open Chrome or Firefox Dev tools you should be able to send $('#ajax_loader_my').hide() and see what happens.

edited Mar 14, 2019 at 12:02

answered Mar 14, 2019 at 11:56

TrevTheDev

2,8172 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RK_15 · Accepted Answer · 2019-03-14 12:20:18Z

1

Rewrite the code this way, this will put your alert and location related code in event queue which will run when it will be free.

if(obj.status=="success") { 
      $('#ajax_loader_my').hide(); 
      setTimeout(function(){
          alert('Success! '+obj.message);
          location.reload();
      },0);
}

answered Mar 14, 2019 at 12:20

RK_15

9395 silver badges11 bronze badges

Comments

stan chacon · Accepted Answer · 2019-03-14 23:57:01Z

Hi you should try to use promises here is the documentation Jquery promises, I made this on the fly it can have some errors but is just an example:

$( 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();
      }

    });
  });
} );

EDIT: Check this jsfiddle it will guide you to elaborate your code

Hope it Helps

Khurram Ishaque · Accepted Answer · 2019-03-14 14:18:23Z

-1

I would rather suggest to use an empty div or span with an Id. Than display success in the html of that div. For Example:

$('#ajax_loader_my').hide();    
setTimeout(function () { 
    $('#successDiv').html('Success! ' + obj.message);
    location.reload();
}, 2000);

edited Mar 14, 2019 at 14:18

answered Mar 14, 2019 at 11:46

Khurram Ishaque

7961 gold badge9 silver badges26 bronze badges

Collectives™ on Stack Overflow

execution out of order inside ajax callback function javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related