Chrome and Safari ajax issue with async:false

Question

I saw this everywhere on the web but i couldn\'t manage to fix my code to avoid this issue, simply I have an ajax function that I trigger when some buttons are clicked, sometime

Answer 1

Using async: false is evil. The Internet is full of such posts, and many browsers including Chrome and Safari will give you numerous warnings on making synchronous AJAX requests.

Fortunately, jQuery's promises can be used to overcome your problem. It doesn't change how your function works, and leverages the power of promises too to make async requests.

You can modify your existing function as follows, so that it returns an AJAX promise, instead of the result.

function doAjax(action, todo, items, error_num, hide_indicator) {
  items.action = action;
  items.do = todo;

  return $.ajax({
      type: 'post',
      dataType: 'html',
      url: ajaxURL,
      data: items,
      beforeSend: function() {
        if (!hide_indicator) showIndicator();
      }
    })
    .then(function(data) {
      if (!hide_indicator) {
        hideIndicator();
      }

      if (data) {
        ajaxObj = JSON.parse(data);

        if (ajaxObj.ok) {
          return ajaxObj;
        }

        alert(ajaxObj.error);
        return false;
      }

      alert('[' + error_num + '] Something went wrong.');
      return false;
    }, function() {
      if (!hide_indicator) {
        hideIndicator();
      }

      alert('[' + error_num + '] Something went wrong.');
      return false;
    });
}

Here, a .then function can be used to pre-process the response, and return the appropriate value to the subsequent promise handlers.

A subsequent promise handler can be implemented as follows, which calls the doAjax function, and reacts on the value returns by pre-processing.

$(document).on('click', '.ad-single', function() {
  doAjax('post_requests', 'get-ad-info', {"id": $(this).data('ad')}, '158', false)
    .then(function(addataObj) {
      if (addataObj) {
        loadContent(addataObj.ad);
      }
    });
});

Here, the .then() chains up with the previous .then(), and reacts on the value returned (which is received in addataObj). Note that it only reacts on the success of the AJAX call. If you want to handle the error response as well, you need to pass a second argument as a function to the .then() handler.

Hope this solves your problem.