diff --git a/src/htmx.js b/src/htmx.js index e6868ba2..471a6628 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -512,15 +512,22 @@ return (function () { swapStyle = oobValue; } - var target = getDocument().querySelector(selector); - if (target) { - var fragment; - fragment = getDocument().createDocumentFragment(); - fragment.appendChild(oobElement); // pulls the child out of the existing fragment - if (!isInlineSwap(swapStyle, target)) { - fragment = oobElement; // if this is not an inline swap, we use the content of the node, not the node itself - } - swap(swapStyle, target, target, fragment, settleInfo); + var targets = getDocument().querySelectorAll(selector); + if (targets) { + forEach( + targets, + function (target) { + var fragment; + var oobElementClone = oobElement.cloneNode(true); + fragment = getDocument().createDocumentFragment(); + fragment.appendChild(oobElementClone); + if (!isInlineSwap(swapStyle, target)) { + fragment = oobElementClone; // if this is not an inline swap, we use the content of the node, not the node itself + } + swap(swapStyle, target, target, fragment, settleInfo); + } + ); + oobElement.parentNode.removeChild(oobElement); } else { oobElement.parentNode.removeChild(oobElement); triggerErrorEvent(getDocument().body, "htmx:oobErrorNoTarget", {content: oobElement}) diff --git a/test/attributes/hx-swap-oob.js b/test/attributes/hx-swap-oob.js index 559849d2..0a1b5880 100644 --- a/test/attributes/hx-swap-oob.js +++ b/test/attributes/hx-swap-oob.js @@ -92,5 +92,31 @@ describe("hx-swap-oob attribute", function () { byId("d1").innerHTML.should.equal("Swapped"); }) + it('swaps into all targets that match the selector (innerHTML)', function () { + this.server.respondWith("GET", "/test", "
Clicked
Swapped
"); + var div = make('
click me
'); + make('
No swap
'); + make('
Not swapped
'); + make('
Not swapped
'); + div.click(); + this.server.respond(); + byId("d1").innerHTML.should.equal("No swap"); + byId("d2").innerHTML.should.equal("Swapped"); + byId("d3").innerHTML.should.equal("Swapped"); + }) + + it('swaps into all targets that match the selector (outerHTML)', function () { + var oobSwapContent = '
Swapped
'; + this.server.respondWith("GET", "/test", "
Clicked
" + oobSwapContent); + var div = make('
click me
'); + make('
No swap
'); + make('
Not swapped
'); + make('
Not swapped
'); + div.click(); + this.server.respond(); + byId("d1").innerHTML.should.equal("
No swap
"); + byId("d2").innerHTML.should.equal(oobSwapContent); + byId("d3").innerHTML.should.equal(oobSwapContent); + }) }); diff --git a/www/attributes/hx-swap-oob.md b/www/attributes/hx-swap-oob.md index 8dcecfb2..a62cbf7a 100644 --- a/www/attributes/hx-swap-oob.md +++ b/www/attributes/hx-swap-oob.md @@ -32,7 +32,7 @@ If the value is `true` or `outerHTML` (which are equivalent) the element will be If a swap value is given, that swap strategy will be used. -If a selector is given, the first element matching that selector will be swapped. If not, the element with an ID matching the new content will be swapped. +If a selector is given, all elements matched by that that selector will be swapped. If not, the element with an ID matching the new content will be swapped. ### Notes