itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-30 22:41:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #162 from nyash/master

Browse Source 
FEATURE: find selector option of the hx-target attribute
This commit is contained in:
1cg 2020-09-01 18:42:01 -07:00 committed by GitHub
commit 6252855c4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/htmx.js
View File

@ -362,6 +362,8 @@ return (function () {
return explicitTarget;
} else if (targetStr.indexOf("closest ") === 0) {
return closest(elt, targetStr.substr(8));
} else if (targetStr.indexOf("find ") === 0) {
return find(elt, targetStr.substr(5));
} else {
return getDocument().querySelector(targetStr);
}

12
test/attributes/hx-target.js
View File

@ -47,6 +47,18 @@ describe("hx-target attribute", function(){
this.server.respond();
div1.innerHTML.should.equal("Clicked!");
});
it('targets a `find` element properly', function()
{
this.server.respondWith("GET", "/test", "Clicked!");
var div1 = make('<div hx-target="find span" hx-get="/test">Click Me! <div><span id="s1"></span><span id="s2"></span></div></div>')
div1.click();
this.server.respond();
var span1 = byId("s1")
var span2 = byId("s2")
span1.innerHTML.should.equal("Clicked!");
span2.innerHTML.should.equal("");
});
it('targets an inner element properly', function()
{

2
www/attributes/hx-target.md
View File

@ -12,6 +12,8 @@ request. The value of this attribute can be:
* `this` which indicates that the element that the `hx-target` attribute is on is the target
* `closest <CSS selector>` which will find the closest parent ancestor that matches the given CSS selector.
(e.g. `closest tr` will target the closest table row to the element)
* `find <CSS selector>` which will find the first child descendant element that matches the given CSS selector.
(e.g `find tr` will target the first child descendant row to the element)
Here is an example that targets a div: