diff options
| -rw-r--r-- | src/htmx.js | 13 | ||||
| -rw-r--r-- | test/attributes/hx-select-oob.js | 34 |
2 files changed, 39 insertions, 8 deletions
diff --git a/src/htmx.js b/src/htmx.js index 597c9b3b..d5d6b036 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -864,13 +864,12 @@ return (function () { if (oobSelects) { var oobSelectValues = oobSelects.split(","); for (var i = 0; i < oobSelectValues.length; i++) { - var oobSelectValue = oobSelectValues[i].split(":", 2); - var id = oobSelectValue[0].trim(); - if (id.indexOf("#") === 0) { - id = id.substring(1); - } - var oobValue = oobSelectValue[1] || "true"; - var oobElement = fragment.querySelector("#" + id); + var oobSelectValue = oobSelectValues[i] + // Support colon in css selectors + var colon = oobSelectValue.lastIndexOf(':') + var split_at = colon == -1 ? oobSelectValue.length : colon + var oobValue = oobSelectValue.substring(split_at + 1) || 'true' + var oobElement = fragment.querySelector(oobSelectValue.substring(0, split_at)) if (oobElement) { oobSwap(oobValue, oobElement, settleInfo); } diff --git a/test/attributes/hx-select-oob.js b/test/attributes/hx-select-oob.js index 570811e8..21cfb791 100644 --- a/test/attributes/hx-select-oob.js +++ b/test/attributes/hx-select-oob.js @@ -49,6 +49,38 @@ describe("hx-select-oob attribute", function () { div2.innerHTML.should.equal(""); }); - + it('supports different swap styles', function() + { + this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><ul id='d2'><li>baz</li></ul>") + var div = make('<div hx-get="/test" hx-select="#d1" hx-select-oob="#d2:beforeend"></div>') + make('<ul id="d2"><li>bar</li></ul>') + div.click() + this.server.respond() + div.innerHTML.should.equal('<div id="d1">foo</div>') + var list = byId('d2') + list.innerHTML.should.equal('<li>bar</li><li>baz</li>') + }) + it('supports non-id selectors', function() + { + this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><div id='d2' identifier='something-else'>bar</div>") + var div = make('<div hx-get="/test" hx-select="#d1" hx-select-oob="div[identifier=\'something-else\']"></div>') + make('<div id="d2"></div>') + div.click() + this.server.respond() + div.innerHTML.should.equal('<div id="d1">foo</div>') + var div2 = byId('d2') + div2.innerHTML.should.equal('bar') + }) + it('supports non-id selectors with colons', function() + { + this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><div id='d2'>bar</div><div id='d3'>baz</div>") + var div = make('<div id="d4" hx-get="/test" hx-select="#d1" hx-select-oob="#d2:has(~ #d3):innerHTML"></div>') + make('<div id="d2"></div>') + div.click() + this.server.respond() + var div2 = byId('d2') + div2.innerHTML.should.equal('bar') + div.innerHTML.should.equal('<div id="d1">foo</div>') + }) }); |