diff --git a/src/htmx.d.ts b/src/htmx.d.ts index 2342300c7..d11cac47b 100644 --- a/src/htmx.d.ts +++ b/src/htmx.d.ts @@ -48,7 +48,7 @@ export function ajax(verb: string, path: string, selector: string): Promise + context: Partial<{ source: any; event: any; handler: any; target: any; swap: any; values: any; headers: any; select: any }> ): Promise; /** diff --git a/src/htmx.js b/src/htmx.js index 79a4702e8..ebf2dae13 100644 --- a/src/htmx.js +++ b/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"); } diff --git a/test/core/api.js b/test/core/api.js index 8a1735c47..53f5960ac 100644 --- a/test/core/api.js +++ b/test/core/api.js @@ -225,6 +225,24 @@ describe("Core htmx API test", function(){ div.innerHTML.should.equal('

foo!

'); }); + it('ajax api works with select', function() + { + this.server.respondWith("GET", "/test", "
foo
bar
"); + var div = make("
"); + htmx.ajax("GET", "/test", {target: "#target", select: "#d2"}); + this.server.respond(); + div.innerHTML.should.equal('
bar
'); + }); + + it('ajax api works with Hx-Select overrides select', function() + { + this.server.respondWith("GET", "/test", [200, {"HX-Reselect": "#d2"}, "
foo
bar
"]); + var div = make("
"); + htmx.ajax("GET", "/test", {target: "#target", select: "#d1"}); + this.server.respond(); + div.innerHTML.should.equal('
bar
'); + }); + it('ajax returns a promise', function(done) { // in IE we do not return a promise diff --git a/www/content/api.md b/www/content/api.md index e19d6ab8e..600d470d7 100644 --- a/www/content/api.md +++ b/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