diff --git a/www/examples.md b/www/examples.md index be1c31a8..09c86364 100644 --- a/www/examples.md +++ b/www/examples.md @@ -37,3 +37,4 @@ You can copy and paste them and then adjust them for your needs. | [Keyboard Shortcuts](/examples/keyboard-shortcuts) | Demonstrates how to create keyboard shortcuts for htmx enabled elements | [Sortable](/examples/sortable) | Demonstrates how to use htmx with the Sortable.js plugin to implement drag-and-drop reordering | [Updating Other Content](/examples/update-other-content) | Demonstrates how to update content beyond just the target elements +| [Confirm](/examples/confirm) | Demonstrates how to implement a custom confirmation dialog with htmx diff --git a/www/examples/confirm.md b/www/examples/confirm.md new file mode 100644 index 00000000..c5bc9372 --- /dev/null +++ b/www/examples/confirm.md @@ -0,0 +1,62 @@ +--- +layout: demo_layout.njk +--- + +## A Customized Confirmation UI + +htmx supports the [`hx-confirm`](/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. + +```html + + +``` + +The technique here is to make the button issue a request on the `confirmed` event, rather than a click. + +We then add some hyperscript to invoke Sweet Alert 2 on a click, asking for confirmation. If the user confirms +the dialog, we trigger the `confirmed` event, which then triggers the htmx request. + +Note that we are taking advantage of the fact that hyperscript is (async-transparent)[https://hyperscript.org/docs/#async] +and automatically resolves the Promise returned by `Swal.fire()`. + +A VanillaJS implementation is left as an exercise for the reader. :) + +{% include demo_ui.html.liquid %} + + + +