When building web experiences, there are safe operations and destructive ones. In the case of dangerous actions, it’s widespread to ask the user if they’d like to continue with the action before ultimately executing it.

In this post, we’ll explore a valuable feature in the Htmx documentation that allows you to intercept outgoing requests and present a Sweet Alert confirmation dialog. This feature can greatly enhance user experience and control in your web applications. Let’s dive in.

The htmx:confirm event

Htmx users are likely familiar with the hx-confirm attribute, which is a declarative way to use the confirm JavaScript function. This uses your browser’s native functionality to display a confirmation dialog that allows the user one last chance to cancel their action.

<button class="btn btn-danger" 
        hx-post=""
        name="input"
        value="DELETE"
        hx-confirm="Are you sure?">
    Delete Important Stuff
</button>

But folks likely don’t know that the htmx:confirm event is triggered before **every ** request. This allows you to intercept, stop, or continue any Htmx request on the client. This opens up a lot of UX opportunities.

To register for this event, you will need the following JavaScript referenced in your web application.

document.body.addEventListener('htmx:confirm', function (evt) {
    // do something here
    // you can evt.preventDefault()
    // or...
    // evt.details.issueRequest() to continue.
});

Let’s use the SweetAlert JavaScript library to enhance the dull confirm dialog.

Add SweetAlert to Htmx Confirmations

I’ll intercept an Htmx request using the event above and slot in a new confirmation dialog. This is the example shown in the Htm documentation. To get started, you’ll need to add a reference to SweetAlert in your web application.

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

You’ll need to modify your target elements with the following attribute.

<button class="btn btn-danger" 
        hx-post=""
        name="input"
        value="DELETE"
        confirm-with-sweet-alert='true'>
    Delete Important Stuff
</button>

Note that this attribute is only necessary if you want to be more selective about when and where this new dialog appears. If you aren’t selective, you don’t need this attribute.

Finally, let’s write some JavaScript code.

// site.js
document.body.addEventListener('htmx:confirm', function (evt) {
    if (evt.target.matches("[confirm-with-sweet-alert='true']")) {
        evt.preventDefault();
        swal({
            title: "Are you sure?",
            text: "Are you sure you are sure?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((confirmed) => {
            if (confirmed) {
                evt.detail.issueRequest();
            }
        });
    }
});

The event will only be handled when the target element has our confirm-with-sweet-alert attribute. Otherwise, it falls back to Htmx’s default behavior.

Cool! Now, you’ll see the SweetAlert dialog defined in our JavaScript whenever you click the button.

Conclusion

Htmx continues to surprise me with its flexibility and extension points. I recommend reading through more of the documentation to discover more features you can use in your applications. In this case, we can enhance the user experience of dangerous operations to give users more detailed information about the action they are about to take.

I hope you try this in your applications, and as always, thanks for reading.