Confirm Custom
Demonstrates how to implement a custom confirmation dialog with htmx
htmx supports the [hx-confirm](https://htmx.org/attributes/hx-confirm/) attribute to provide a simple mechanism for confirming a user action. This uses the default confirm() function in javascript which, while trusty, may not be consistent with your applications UX.
In this example we will see how to use [sweetalert2](https://sweetalert2.github.io/) to implement a custom confirmation dialog. Below are two examples, one using a click+custom event method, and one using the built-in hx-confirm attribute and the [htmx:confirm](https://htmx.org/events/#htmx:confirm) event.
## Using on click+custom event
```
def solution1():
js = """
Swal.fire({title: 'Confirm', text:'Do you want to continue?'}).then((result)=>{
if(result.isConfirmed){
htmx.trigger(this, 'confirmed');
}
})
"""
return Button("Click me", hx_get=confirmed, hx_trigger="confirmed", onClick=js)
```
Here we use javascript to show a Sweet Alert 2 on a click, asking for confirmation. If the user confirms the dialog, we then trigger the request by triggering the custom “confirmed” event which is then picked up by hx-trigger.
## Vanilla JS, hx-confirm
We add some javascript to invoke Sweet Alert 2 on a click, asking for confirmation. If the user confirms the dialog, we trigger the request by calling the issueRequest method. We pass `skipConfirmation=true` as argument to skip `window.confirm`.
```
def solution2():
return Button("Click me", hx_get=confirmed, hx_confirm="Do you want to continue?")
```
Javascript code
```
document.addEventListener("htmx:confirm", function(e) {
console.log(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()
}
})
})
```
This allows to use hx-confirm’s value in the prompt which is convenient when the question depends on the element.
Learn more about the htmx:confirm event [here](https://htmx.org/events/#htmx:confirm).