diff options
| -rw-r--r-- | src/htmx.js | 15 | ||||
| -rw-r--r-- | test/core/headers.js | 10 | ||||
| -rw-r--r-- | www/content/reference.md | 1 |
3 files changed, 21 insertions, 5 deletions
diff --git a/src/htmx.js b/src/htmx.js index 556247b2..2fb8b9c5 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -1010,8 +1010,8 @@ return (function () { } } - function maybeSelectFromResponse(elt, fragment) { - var selector = getClosestAttributeValue(elt, "hx-select"); + function maybeSelectFromResponse(elt, fragment, selectOverride) { + var selector = selectOverride || getClosestAttributeValue(elt, "hx-select"); if (selector) { var newFragment = getDocument().createDocumentFragment(); forEach(fragment.querySelectorAll(selector), function (node) { @@ -1085,12 +1085,12 @@ return (function () { } } - function selectAndSwap(swapStyle, target, elt, responseText, settleInfo) { + function selectAndSwap(swapStyle, target, elt, responseText, settleInfo, selectOverride) { settleInfo.title = findTitle(responseText); var fragment = makeFragment(responseText); if (fragment) { handleOutOfBandSwaps(elt, fragment, settleInfo); - fragment = maybeSelectFromResponse(elt, fragment); + fragment = maybeSelectFromResponse(elt, fragment, selectOverride); handlePreservedElements(fragment); return swap(swapStyle, elt, target, fragment, settleInfo); } @@ -3325,8 +3325,13 @@ return (function () { // safari issue - see https://github.com/microsoft/playwright/issues/5894 } + var selectOverride; + if (hasHeader(xhr, /HX-Reselect:/i)) { + selectOverride = xhr.getResponseHeader("HX-Reselect"); + } + var settleInfo = makeSettleInfo(target); - selectAndSwap(swapSpec.swapStyle, target, elt, serverResponse, settleInfo); + selectAndSwap(swapSpec.swapStyle, target, elt, serverResponse, settleInfo, selectOverride); if (selectionInfo.elt && !bodyContains(selectionInfo.elt) && diff --git a/test/core/headers.js b/test/core/headers.js index e7d1ec25..3b72eb52 100644 --- a/test/core/headers.js +++ b/test/core/headers.js @@ -188,6 +188,16 @@ describe("Core htmx AJAX headers", function () { div1.innerHTML.should.equal("Result"); }) + it("should handle HX-Reselect", function () { + this.server.respondWith("GET", "/test", [200, {"HX-Reselect": "#d2"}, "<div id='d1'>foo</div><div id='d2'>bar</div>"]); + + var div = make('<div hx-get="/test" hx-select="#d1"></div>'); + div.click(); + this.server.respond(); + + div.innerHTML.should.equal('<div id="d2">bar</div>'); + }); + it("should handle simple string HX-Trigger-After-Swap response header properly w/ outerHTML swap", function () { this.server.respondWith("GET", "/test", [200, {"HX-Trigger-After-Swap": "foo"}, ""]); diff --git a/www/content/reference.md b/www/content/reference.md index b8d77f4e..1046978f 100644 --- a/www/content/reference.md +++ b/www/content/reference.md @@ -117,6 +117,7 @@ The table below lists all other attributes available in htmx. | [`HX-Replace-Url`](@/headers/hx-replace-url.md) | replaces the current URL in the location bar | `HX-Reswap` | Allows you to specify how the response will be swapped. See [hx-swap](@/attributes/hx-swap.md) for possible values | `HX-Retarget` | A CSS selector that updates the target of the content update to a different element on the page +| `HX-Reselect` | A CSS selector that allows you to choose which part of the response is used to be swapped in. Overrides an existing [`hx-select`](@/attributes/hx-select.md) on the triggering element | [`HX-Trigger`](@/headers/hx-trigger.md) | allows you to trigger client side events, see the [documentation](@/headers/hx-trigger.md) for more info | [`HX-Trigger-After-Settle`](@/headers/hx-trigger.md) | allows you to trigger client side events, see the [documentation](@/headers/hx-trigger.md) for more info | [`HX-Trigger-After-Swap`](@/headers/hx-trigger.md) | allows you to trigger client side events, see the [documentation](@/headers/hx-trigger.md) for more info |