Confirm Custom

from fasthtml.common import Div, fast_app, Script, Button, Label

js_solution_2 = """
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()
    }
    })
})
"""

app, rt = fast_app(hdrs=[Script(src="https://cdn.jsdelivr.net/npm/sweetalert2@11"), Script(js_solution_2)])


@app.get
def page():
    return Div(cls="container grid")(Label("Solution 1"), solution1(), Label("Solution 2"), solution2())


# ---- Solution 1 ----
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)


@app.get
def confirmed():
    return "Confirmed"


# ---- Solution 2 ----


def solution2():
    return Button("Click me", hx_get=confirmed, hx_confirm="Do you want to continue?")

Server Calls