Search code examples
htmx

'htmx:confirm' event firing on every ajax call

I'm attaching a htmx:confirm event listener to the body so as to override the default browser confirm UI with sweetalert2 library as shown in this example. However I'm running into unnecessary prompts every time Htmx makes an ajax call. Below is my Html.

<!DOCTYPE html>
<html>
    <head>
        <title>htmx test</title>
    </head>
    <body>
        <h1>TODOs</h1>
        <div id="content" hx-get="https://jsonplaceholder.typicode.com/todos/1" hx-trigger="load">
            <p>...loading</p>
        </div>
        <br/>
        <button id="btn-change" hx-get="https://jsonplaceholder.typicode.com/todos/2"  hx-target="#content">Change TODO</button>
        <button id="btn-change-w-confirm" hx-get="https://jsonplaceholder.typicode.com/todos/3" hx-confirm="Are you sure you want to change todo?" hx-target="#content">Change TODO w/Confirm</button>
        <script src="https://unpkg.com/[email protected]" integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            document.body.addEventListener('htmx:confirm', function(e) {
                console.log('htmx:confirm', e.detail);
                e.preventDefault();
                Swal.fire({
                    title: e.detail.question,
                    showCancelButton: true,
                    icon: "warning",
                }).then(function(result) {
                    if(result.isConfirmed) e.detail.issueRequest(true);
                });
            });
        </script>
    </body>
</html>

The expected behavior is only #btn-change-w-confirm should be displaying the confirm message as it has hx-confirm attribute. However the confirm message is displayed by all ajax calls including when the page loads and the other button without the confirm.

enter image description here

Is it normal for htmx:confirm event to be raised by every Ajax call or is there something I'm missing?

https://jsfiddle.net/qc3nwuez/

Solution

  • I have added a check to verify that only events arising from elements with attribute hx-confirm can show the confirm message.

    document.addEventListener("htmx:confirm", function(e) {
    const confirmMessage = e.detail.elt.getAttribute("hx-confirm");
    if(confirmMessage){
        e.preventDefault();
        Swal.fire({
            title: confirmMessage,
            showCancelButton: true,
            icon: "warning",
        }).then(function(result) {
            if(result.isConfirmed) e.detail.issueRequest(true);
        });
    }
});