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.

Yes I had thought of that but there is a lot of logic happening on click of Save which also is needed to be done on click of link,Isnt there a way to make the trigger a promise in someway? — techie_28, Sep 24 '18 at 13:23

score 1 · Accepted Answer · answered Sep 24 '18 at 13:24

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

answered Sep 24 '18 at 13:24

Rory McCrossan

331,213
40
305
339

I have shortened these event handlers in the question alot for simplicity but lot of logic is there in each of the handler. – techie_28 Sep 24 '18 at 13:26
Ok, is there a reason the amount of logic in the functions affects anything? The pattern you need to follow is still the same. – Rory McCrossan Sep 24 '18 at 13:28
I was thinking if `return doAjax()` inside the `.saveBtn` could do this? or maybe using `triggerHandler` instead? – techie_28 Sep 24 '18 at 13:42
No, you can't return anything from an event handler. – Rory McCrossan Sep 24 '18 at 14:40

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

1 Answers1