Spaces:
Running
Running
File size: 3,166 Bytes
84e55f1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
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?")
DESC = "Demonstrates how to implement a custom confirmation dialog with htmx"
DOC = """
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
::solution1::
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`.
::solution2::
Javascript code
::js_solution_2::
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).
"""
HTMX_URL = "https://htmx.org/examples/confirm/"
HEIGHT = "250px"
|