Attach a callback on click of a button which does an ajax operation

Question

I'm aware that this can be achieved via a Promise but I am struggling to figure out how.

jQuery('.parentDiv').on('click', '.link', function(e) {
  jQuery.when(jQuery('.saveBtn').trigger('click', { 'evtData': 'link' })).then(function {
    // rest of the logic that should be performed on click of .link
  }); 
});

The click of .saveBtn calls a function named doAjax:

jQuery('.saveBtn').on('click', function() {
  doAjax()
});

function doAjax() {
  var ajaxCall = jQuery.ajax(ajaxObject);
  ajaxCall.done(function(data, status, xhr) {
    //some logic go here
  });
  return ajaxCall;
}

Despite this the logic inside the .then handler is getting executed first i.e before doAjax completes.

I believe I need to change the jQuery.when(jQuery('.saveBtn').trigger('click',{'evtData':'link'})) as it may not be getting the Promise state which it should and immediately getting marked as Resolved thereby executing the callback without waiting?. I tried return doAjax in .saveBtn but that also did not make a difference.

Ideas please.

Answer 1

The issue is because trigger() is not an async function, so then is called immediately. It would make far more sense to just call doAjax() directly from the click of .link instead of faking DOM events. Try this:

jQuery(function($) {
  $('.parentDiv').on('click', '.link', function(e) {
    doAjax().then(function {
      // rest of the logic that should be performed on click of .link
    });
  });

  $('.saveBtn').on('click', function() {
    doAjax()
  });

  function doAjax() {
    var ajaxCall = $.ajax(ajaxObject);
    ajaxCall.done(function(data, status, xhr) {
      // some logic go here
    });
    return ajaxCall;
  }
});