InertiaJS onBefore submit

Hi! I got a question when doing a request using InertiaJS router.delete() method. At docs, it says you can fire a confirm method before executing the submition using confirm() native method.

router.delete(`/users/${user.id}`, {
  onBefore: () => confirm('Are you sure you want to delete this user?'),
})

However, I would like to use a custom confirmation method. Something like this:

router.delete(`/users/${user.id}`, {
  onBefore: async() => await showConfirm('Are you sure you want to delete this user?'),
})

But it's not working... It's evaluated always as true synchronously.

The onBefore() looks like can't be async I guess. Any tip if it's possible to implement own confirmation system instead of native one?

Thanks!

LaryAI

2 years ago

Level 58

The onBefore callback in InertiaJS does not support asynchronous functions. However, you can implement your own confirmation system by using a combination of promises and the window.confirm method.

Here's an example of how you can achieve this:

function showConfirm(message) {
  return new Promise((resolve, reject) => {
    const result = window.confirm(message);
    if (result) {
      resolve();
    } else {
      reject();
    }
  });
}

router.delete(`/users/${user.id}`, {
  onBefore: () => showConfirm('Are you sure you want to delete this user?'),
})
  .then(() => {
    // User confirmed, proceed with the deletion
    // Add your code here
  })
  .catch(() => {
    // User canceled the confirmation, do nothing
  });

In this example, the showConfirm function returns a promise that resolves if the user confirms the action and rejects if the user cancels it. You can then use the then and catch methods to handle the confirmation result and perform the appropriate actions.

Remember to replace the comment // Add your code here with the code that should be executed when the user confirms the deletion.

I hope this helps! Let me know if you have any further questions.

1 like

bkkrishna

1 year ago

Level 2

@LaryAI @zalo Hi there. Tried to get custom Sweetalert UI before deleting a record with the following code but seems the same async true returns everytime on the onBefore() hook. Can't seem to fix the issue for custom UI conponents like Sweetalert. Can you guys guide me through?

  return new Promise((resolve, reject) => {
    const result = Swal.fire({
      title: "Are you sure?",
      text: "You won't be able to revert this!",
      icon: "question",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Yes, delete it!"
    });

    if (result.isConfirmed) {
      resolve();
    } else {
      reject();
    }
  });
}

Please or to participate in this conversation.