callback this isn't the button

[justinkruit]

Hi, thanks for creating this library!

When using the callback on the button on a confirm, this does not point to the button, but instead to the button that triggered the modal. Is this intended and did I get the documentation wrong? Or is there a bug in the code?

$('#mark-completed-as-implemented').on('click', function () {
  modbox.confirm({
    body: 'Are you sure you want to mark all the completed requests as implemented?',
    title: null,
    center: true,
    okButton: {
      label: 'Yes',
      style: 'success',
      close: false,
      callback: (event, modal) => {
        console.log(this); // This does not point to the button, but to #mark-completed-as-implemented
        $(this).prop('disabled', true).append('<i class="fa-duotone fa-spinner-third fa-spin ms-2"></i>');
        sendAjax('mark_completed_as_implemented', { app_id: app_id }).then(response => {
          if (!response.success) {
            bs5_toast(response.data.message, 'error');
          } else {
            bs5_toast(response.data.message, 'success');
          }
          $(this).prop('disabled', false).find('.fa-spinner-third').remove();
          modal.hide();
        });
      },
    },
  });
});

[erobertson42]

@justinkruit I believe the issue is that you're using an arrow function for the callback. Arrow functions don't/can't have their own execution context, so it is not possible to set this to a specific element. If you simply modify that to a standard anonymous function, I believe it should work as expected.

modbox.confirm({
  okButton: {
    callback: function(event, modal) {
      console.log(this);
    }
  }
});

[justinkruit]

That indeed did the trick, thank you very much!