diff options
| -rw-r--r-- | src/htmx.js | 13 | ||||
| -rw-r--r-- | test/core/events.js | 24 | ||||
| -rw-r--r-- | www/events.md | 38 |
3 files changed, 74 insertions, 1 deletions
diff --git a/src/htmx.js b/src/htmx.js index 71cc2352..46203a55 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -2593,7 +2593,7 @@ return (function () { return arr; } - function issueAjaxRequest(verb, path, elt, event, etc) { + function issueAjaxRequest(verb, path, elt, event, etc, confirmed) { var resolve = null; var reject = null; etc = etc != null ? etc : {}; @@ -2617,6 +2617,17 @@ return (function () { return; } + // allow event-based confirmation w/ a callback + if (!confirmed) { + var issueRequest = function() { + return issueAjaxRequest(verb, path, elt, event, etc, true); + } + var confirmDetails = {target: target, elt: elt, path: path, verb: verb, triggeringEvent: event, etc: etc, issueRequest: issueRequest}; + if (triggerEvent(elt, 'htmx:confirm', confirmDetails) === false) { + return; + } + } + var syncElt = elt; var eltData = getInternalData(elt); var syncStrategy = getClosestAttributeValue(elt, "hx-sync"); diff --git a/test/core/events.js b/test/core/events.js index 433f5862..64f4c07d 100644 --- a/test/core/events.js +++ b/test/core/events.js @@ -584,4 +584,28 @@ describe("Core htmx Events", function() { }); + it("htmx:confirm can cancel request", function () { + var allow = false; + var handler = htmx.on("htmx:confirm", function (evt) { + evt.preventDefault(); + if (allow) { + evt.detail.issueRequest(); + } + }); + + try { + this.server.respondWith("GET", "/test", "updated"); + var div = make("<div hx-get='/test'></div>"); + div.click(); + this.server.respond(); + div.innerHTML.should.equal(""); + allow = true; + div.click(); + this.server.respond(); + div.innerHTML.should.equal("updated"); + } finally { + htmx.off("htmx:load", handler); + } + }); + }); diff --git a/www/events.md b/www/events.md index 8e6cd3e0..f5bd15cc 100644 --- a/www/events.md +++ b/www/events.md @@ -157,6 +157,44 @@ than a single value. * `detail.target` - the target of the request * `detail.verb` - the HTTP verb in use +### <a name="htmx:confirm"></a> Event - [`htmx:confirm`](#htmx:confirm) + +This event is triggered immediate 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` +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 creat an asynchronous confirmation dialog. + +Here is an example using [sweet alert](https://sweetalert.js.org/guides/): + +```javascript +document.body.addEventListener('htmx:confirm', function(evt) { + evt.preventDefault(); + swal({ + title: "Are you sure?", + text: "Are you sure you are sure?", + icon: "warning", + buttons: true, + dangerMode: true, + }).then((confirmed) => { + if (confirmed) { + evt.detail.issueRequest(); + } + }); +}); +``` + +##### Details + +{target: target, elt: elt, path: path, verb: verb, triggeringEvent: event, etc: etc, issueRequest: issueRequest} + +* `detail.elt` - the element in question +* `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 +* `detail.target` - the target of the request +* `detail.triggeringEvent` - the orignial event that triggered this request +* `detail.verb` - the verb of the request (e.g. `GET`) + ### <a name="htmx:historyCacheError"></a> Event - [`htmx:historyCacheError`](#htmx:historyCacheError) This event is triggered when an attempt to save the cache to `localStorage` fails |