Need help with a confirmation modal

[adlecluse]

Hello!

I would love to have a confirmation modal for the following use case.
Let's say I have a list of users and every row has an delete button to delete the user. Before executing a request directly, I would love a Are you sure modal for the user to confirm this action. Just like the one in the documentation

But I'm wondering how I can act upon the Continue button here? I need to do a request with the user id from the row that was clicked. Any ideas on how I can achieve this behaviour?

I probably can save some state (the user id) with AlpineJS and when clicking on the confirm button it would fetch the selected user id and after that send the request? But I'm not sure how it all fits together

[dimmerz92]

hx-confirm

[axzilla]

What @dimmerz92 said, and there are also several ways to achieve this, e.g. with Alpine.js states. I hope to find some time in the next weeks/months to add some advanced examples to the showcase.

[adlecluse]

Not sure how to translate what they use in the htmx example to the templUI modal:

<script>
  document.addEventListener("htmx:confirm", function(e) {
    // The event is triggered on every trigger for a request, so we need to check if the element
    // that triggered the request has a hx-confirm attribute, if not we can return early and let
    // the default behavior happen
    if (!e.detail.target.hasAttribute('hx-confirm')) return

    // This will prevent the request from being issued to later manually issue it
    e.preventDefault()

    Swal.fire({
      title: "Proceed?",
      text: `I ask you... ${e.detail.question}`
    }).then(function(result) {
      if (result.isConfirmed) {
        // If the user confirms, we manually issue the request
        e.detail.issueRequest(true); // true to skip the built-in window.confirm()
      }
    })
  })
</script>

Is there something where I can wait for the result like you can do with the sweetalert example?

[axzilla]

Please check out this example here: https://github.com/axzilla/templui-quickstart/tree/advanced-modal (Adjust your Go path in tailwind.config.js!)

Let me know what you think about this approach. This is at least how I would implement it! If you like it, maybe I can start creating an "Advanced Examples" section or something like that!

[adlecluse]

Thanks for the example! 🙏

The part where you mention:

// Seems redundant, but it's not. The modal is actually defined here. Every user has its own modal.

This was something I didn't want to do, as it feels ... redundant 😅 and I wanted to make the dialog dynamic by passing the clicked element it's data attribute where for example the user id was set.
But it makes things easier that's for sure, maybe I could rethink my setup so I don't have to make my frontend too "smart".

[axzilla]

Fair enough! Checkout the last commit! Do you think about something like this?

[adlecluse]

Aha yes indeed! I'm getting the hang out of it from this example!

Thanks!