Pre and Post event on AJAX call

Question

In a form, using #ajax to add a callback when a button is pressed. When the button on my form is pressed, I wish to call some JavaScript when the button is pressed and once again when the AJAX call is complete. can anyone suggest?

Answer 1

The "duplicate" I linked to above gives you almost all of your answer, but this adds the "complete" function that you asked for.

In a custom js file in your module (this assumes that your module is named ajax_example and that the ID of the element being clicked is #edit-submit):

Drupal.behaviors.ajax_example = {
  attach: function (context, settings) {
    // Overwrite beforeSubmit
    Drupal.ajax['edit-submit'].options.beforeSubmit = function (form_values, element, options) {
      console.log('before');
      // Add your on click code here
    }
    // Overwrite complete
    Drupal.ajax['edit-submit'].options.complete = function (form_values, element, options) {
      console.log('after');
      // Add your on complete code here
    }
  }
}