function handleAjaxResponse($el) {
  var $header = $('header');
  $el.on("ajax:success", function(e, data){
    $header.after('<div class="success">' + data.message + '</div>');
  }).on("ajax:error", function(e, xhr) {
    if (xhr.status === 400){
      $header.after('<div class="error">' + xhr.responseJSON.join('<br>') + '</div>');
    } else {
      $header.after('<div class="error">Oops! There was an error processing your request. Please try again.</div>');
    }
  });
}

$(document).ready(function() {
  $('[data-id=ajax-action]').each(function(){ handleAjaxResponse($(this)); });
});