Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Amend docs on htmx:confirm and its detail.question property. #2550

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Amend docs on htmx:confirm and its detail.question property. #2550

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions www/content/events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,19 +179,28 @@ than a single value.

### Event - `htmx:confirm` {#htmx:confirm}

This event is triggered immediately after a trigger occurs on an element. It allows you to cancel (or delay) issuing
the AJAX request. If you call `preventDefault()` on the event, it will not issue the given request. The `detail`
This event is triggered immediately after a trigger occurs on an element. It allows you to cancel (or delay) issuing
the AJAX request.

**Every AJAX request issued by HTMX will fire this event**, including requests sent using the [Javascript API](@reference.md#api).
To handle only events from elements with the [`hx-confirm`](@/attributes/hx-confirm.md) attribute, you may check
for `detail.question` as shown in the example below, or attach the event listener to a more specific element.

If you call `preventDefault()` on the event, it will not issue the given request. The `detail`
object contains a function, `evt.detail.issueRequest()`, that can be used to issue the actual AJAX request at a
later point. Combining these two features allows you to create an asynchronous confirmation dialog.

Here is an example using [sweet alert](https://sweetalert.js.org/guides/):
Here is an example using [SweetAlert](https://sweetalert.js.org):

```javascript
document.body.addEventListener('htmx:confirm', function(evt) {
if (!evt.detail.question)
return;

evt.preventDefault();
swal({
title: "Are you sure?",
text: "Are you sure you are sure?",
text: evt.detail.question,
icon: "warning",
buttons: true,
dangerMode: true,
Expand All @@ -208,6 +217,7 @@ document.body.addEventListener('htmx:confirm', function(evt) {
{target: target, elt: elt, path: path, verb: verb, triggeringEvent: event, etc: etc, issueRequest: issueRequest}

* `detail.elt` - the element in question
* `detail.question` - the confirmation prompt from the [`hx-confirm`](@/attributes/hx-confirm.md) attribute (otherwise `null`)
* `detail.etc` - additional request information (mostly unused)
* `detail.issueRequest` - a no argument function that can be invoked to issue the request (should be paired with `evt.preventDefault()`!)
* `detail.path` - the path of the request
Expand Down
4 changes: 2 additions & 2 deletions www/content/reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,11 +140,11 @@ All other attributes available in htmx.
| [`htmx:beforeCleanupElement`](@/events.md#htmx:beforeCleanupElement) | triggered before htmx [disables](@/attributes/hx-disable.md) an element or removes it from the DOM
| [`htmx:beforeOnLoad`](@/events.md#htmx:beforeOnLoad) | triggered before any response processing occurs
| [`htmx:beforeProcessNode`](@/events.md#htmx:beforeProcessNode) | triggered before htmx initializes a node
| [`htmx:beforeRequest`](@/events.md#htmx:beforeRequest) | triggered before an AJAX request is made
| [`htmx:beforeRequest`](@/events.md#htmx:beforeRequest) | triggered before an AJAX request is sent, allows you to cancel the request
| [`htmx:beforeSwap`](@/events.md#htmx:beforeSwap) | triggered before a swap is done, allows you to configure the swap
| [`htmx:beforeSend`](@/events.md#htmx:beforeSend) | triggered just before an ajax request is sent
| [`htmx:configRequest`](@/events.md#htmx:configRequest) | triggered before the request, allows you to customize parameters, headers
| [`htmx:confirm`](@/events.md#htmx:confirm) | triggered after a trigger occurs on an element, allows you to cancel (or delay) issuing the AJAX request
| [`htmx:confirm`](@/events.md#htmx:confirm) | triggered before an AJAX request is configured, allows you to cancel or delay the request
| [`htmx:historyCacheError`](@/events.md#htmx:historyCacheError) | triggered on an error during cache writing
| [`htmx:historyCacheMiss`](@/events.md#htmx:historyCacheMiss) | triggered on a cache miss in the history subsystem
| [`htmx:historyCacheMissError`](@/events.md#htmx:historyCacheMissError) | triggered on a unsuccessful remote retrieval
Expand Down