itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 15:25:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implementation of HX-Reselect (#1385)

Browse Source 
* HX-Reselect #1040

* HX-Reselect documentation

* HX-Reselect: Fix wrong variable name
This commit is contained in:
RoToRa 2023-07-14 22:21:21 +02:00 committed by GitHub
parent 39ffb3aa18
commit 3521c3c059
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/htmx.js
View File

@ -998,8 +998,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) {
@ -1073,12 +1073,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);
}
@ -3273,8 +3273,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) &&

10
test/core/headers.js
View File

@ -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"}, ""]);

1
www/content/reference.md
View File

@ -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