hook to allow for custom confirmation dialogs, etc.

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");

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);
+        }
+    });
+
 });

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