Add select option to htmx.ajax() (#1985)

adds select to ajax api

src/htmx.d.ts

@@ -48,7 +48,7 @@ export function ajax(verb: string, path: string, selector: string): Promise<void
 export function ajax(
     verb: string,
     path: string,
-    context: Partial<{ source: any; event: any; handler: any; target: any; swap: any; values: any; headers: any }>
+    context: Partial<{ source: any; event: any; handler: any; target: any; swap: any; values: any; headers: any; select: any }>
 ): Promise<void>;
 
 /**

src/htmx.js

@@ -2906,6 +2906,7 @@ return (function () {
                             values : context.values,
                             targetOverride: resolveTarget(context.target),
                             swapOverride: context.swap,
+                            select: context.select,
                             returnPromise: true
                         });
                 }
@@ -2960,6 +2961,7 @@ return (function () {
                 elt = getDocument().body;
             }
             var responseHandler = etc.handler || handleAjaxResponse;
+            var select = etc.select || null;
 
             if (!bodyContains(elt)) {
                 // do not issue requests for elements removed from the DOM
@@ -3222,7 +3224,7 @@ return (function () {
             }
 
             var responseInfo = {
-                xhr: xhr, target: target, requestConfig: requestConfig, etc: etc, boosted: eltIsBoosted,
+                xhr: xhr, target: target, requestConfig: requestConfig, etc: etc, boosted: eltIsBoosted, select: select,
                 pathInfo: {
                     requestPath: path,
                     finalRequestPath: finalPath,
@@ -3393,6 +3395,7 @@ return (function () {
             var target = responseInfo.target;
             var etc = responseInfo.etc;
             var requestConfig = responseInfo.requestConfig;
+            var select = responseInfo.select;
 
             if (!triggerEvent(elt, 'htmx:beforeOnLoad', responseInfo)) return;
 
@@ -3502,6 +3505,10 @@ return (function () {
                         }
 
                         var selectOverride;
+                        if (select) {
+                            selectOverride = select;
+                        }
+
                         if (hasHeader(xhr, /HX-Reselect:/i)) {
                             selectOverride = xhr.getResponseHeader("HX-Reselect");
                         }

test/core/api.js

@@ -225,6 +225,24 @@ describe("Core htmx API test", function(){
         div.innerHTML.should.equal('<p class="test">foo!</p>');
     });
 
+    it('ajax api works with select', function()
+    {
+        this.server.respondWith("GET", "/test", "<div id='d1'>foo</div><div id='d2'>bar</div>");
+        var div = make("<div id='target'></div>");
+        htmx.ajax("GET", "/test", {target: "#target", select: "#d2"});
+        this.server.respond();
+        div.innerHTML.should.equal('<div id="d2">bar</div>');
+    });
+
+    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>");
+        htmx.ajax("GET", "/test", {target: "#target", select: "#d1"});
+        this.server.respond();
+        div.innerHTML.should.equal('<div id="d2">bar</div>');
+    });
+
     it('ajax returns a promise', function(done)
     {
         // in IE we do not return a promise

www/content/api.md

@@ -60,6 +60,7 @@ or
     * `swap` - how the response will be swapped in relative to the target
     * `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
 
 ##### Example