add selectOOB and simplify ajax helper

Author: MichaelWest22

src/htmx.js

@@ -4039,24 +4039,19 @@ var htmx = (function() {
           returnPromise: true
         })
       } else {
-        let resolvedTarget = resolveTarget(context.target)
+        const { target, swap, source, event, ...restContext } = context
+        let resolvedTarget = resolveTarget(target)
         // If target is supplied but can't resolve OR source is supplied but both target and source can't be resolved
         // then use DUMMY_ELT to abort the request with htmx:targetError to avoid it replacing body by mistake
-        if ((context.target && !resolvedTarget) || (context.source && !resolvedTarget && !resolveTarget(context.source))) {
+        if ((target && !resolvedTarget) || (source && !resolvedTarget && !resolveTarget(source))) {
           resolvedTarget = DUMMY_ELT
         }
-        return issueAjaxRequest(verb, path, resolveTarget(context.source), context.event,
-          {
-            handler: context.handler,
-            headers: context.headers,
-            values: context.values,
-            targetOverride: resolvedTarget,
-            swapOverride: context.swap,
-            select: context.select,
-            returnPromise: true,
-            push: context.push,
-            replace: context.replace
-          })
+        return issueAjaxRequest(verb, path, resolveTarget(source), event, {
+          ...restContext,
+          targetOverride: resolvedTarget,
+          swapOverride: swap,
+          returnPromise: true
+        })
       }
     } else {
       return issueAjaxRequest(verb, path, null, null, {
@@ -4856,7 +4851,7 @@ var htmx = (function() {
         selectOverride = xhr.getResponseHeader('HX-Reselect')
       }
 
-      const selectOOB = getClosestAttributeValue(elt, 'hx-select-oob')
+      const selectOOB = etc.selectOOB || getClosestAttributeValue(elt, 'hx-select-oob')
       const select = getClosestAttributeValue(elt, 'hx-select')
 
       swap(target, serverResponse, swapSpec, {
@@ -5175,6 +5170,7 @@ var htmx = (function() {
  * @property {string} [select]
  * @property {string} [push]
  * @property {string} [replace]
+ * @property {string} [selectOOB]
  */
 
 /**
@@ -5223,6 +5219,7 @@ var htmx = (function() {
  * @property {number} [timeout]
  * @property {string} [push]
  * @property {string} [replace]
+ * @property {string} [selectOOB]
  */
 
 /**

test/core/api.js

@@ -319,6 +319,16 @@ describe('Core htmx API test', function() {
     div.innerHTML.should.equal('<div id="d2">bar</div>')
   })
 
+  it('ajax api works with selectOOB', function() {
+    this.server.respondWith('GET', '/test', "<div id='oob'>OOB Content</div><div>Main Content</div>")
+    var target = make("<div id='target'></div>")
+    var oobDiv = make("<div id='oob'></div>")
+    htmx.ajax('GET', '/test', { target: '#target', selectOOB: '#oob:innerHTML' })
+    this.server.respond()
+    target.innerHTML.should.equal('<div>Main Content</div>')
+    oobDiv.innerHTML.should.equal('OOB Content')
+  })
+
   it('ajax api works with Hx-Select overrides select', function() {
     this.server.respondWith('GET', '/test', [200, { 'HX-Reselect': '#d2' }, "<div id='d1'>foo</div><div id='d2'>bar</div>"])
     var div = make("<div id='target'></div>")
@@ -716,4 +726,20 @@ describe('Core htmx API test', function() {
     var path = sessionStorage.getItem('htmx-current-path-for-history')
     path.should.equal('/abc123')
   })
+
+  it('ajax api passes custom context properties to htmx events', function() {
+    this.server.respondWith('GET', '/test', 'response')
+    var div = make("<div id='d1'></div>")
+    var customProp = null
+    var handler = htmx.on('htmx:beforeRequest', function(event) {
+      customProp = event.detail.etc.customProperty
+    })
+    htmx.ajax('GET', '/test', {
+      target: '#d1',
+      customProperty: 'testValue'
+    })
+    this.server.respond()
+    customProp.should.equal('testValue')
+    htmx.off('htmx:beforeRequest', handler)
+  })
 })

www/content/api.md

@@ -65,8 +65,10 @@ or
     * `values` - values to submit with the request
     * `headers` - headers to submit with the request
     * `select` - allows you to select the content you want swapped from a response
+    * `selectOOB` - allows you to select content for out-of-band swaps from a response
     * `push` - can be `'true'` or a path to push a URL into browser location history
     * `replace` - can be `'true'` or a path to replace the URL in the browser location history
+    * *custom properties* - any additional properties will be passed to some htmx events via `event.detail.etc`
 
 ##### Example