diff --git a/www/content/events.md b/www/content/events.md index 3fd5ab8d0..d7e17bee6 100644 --- a/www/content/events.md +++ b/www/content/events.md @@ -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, @@ -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 diff --git a/www/content/reference.md b/www/content/reference.md index d9a98e898..9817c25d4 100644 --- a/www/content/reference.md +++ b/www/content/reference.md @@ -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