diff options
| -rw-r--r-- | www/content/attributes/hx-target.md | 14 | ||||
| -rw-r--r-- | www/content/reference.md | 1 | ||||
| -rw-r--r-- | www/content/server-examples.md | 1 |
3 files changed, 11 insertions, 5 deletions
diff --git a/www/content/attributes/hx-target.md b/www/content/attributes/hx-target.md index f2be64bb..c1571e9b 100644 --- a/www/content/attributes/hx-target.md +++ b/www/content/attributes/hx-target.md @@ -5,11 +5,15 @@ title = "hx-target" The `hx-target` attribute allows you to target a different element for swapping than the one issuing the AJAX request. The value of this attribute can be: - * a CSS query selector of the element to target - * `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. +* a CSS query selector of the element to target +* `this` which indicates that the element that the `hx-target` attribute is on is the target + `next <CSS selector>` which will scan the DOM forward for the first element that matches the given CSS selector. + (e.g. `next .error` will target the closest following sibling element with `error` class) +* `previous <CSS selector>` which will scan the DOM backwards for the first element that matches the given CSS selector. + (e.g `previous .error` will target the closest previous sibling with `error` class) +* `closest <CSS selector>` which will find the closest parent ancestor that matches the given CSS selector. + (e.g. `closest table` will target the closest parent table 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: diff --git a/www/content/reference.md b/www/content/reference.md index 31535f29..381efac5 100644 --- a/www/content/reference.md +++ b/www/content/reference.md @@ -158,6 +158,7 @@ The table below lists all other attributes available in htmx. | [`htmx:responseError`](@/events.md#htmx:responseError) | triggered when an HTTP response error (non-`200` or `300` response code) occurs | [`htmx:sendError`](@/events.md#htmx:sendError) | triggered when a network error prevents an HTTP request from happening | [`htmx:sseError`](@/events.md#htmx:sseError) | triggered when an error occurs with a SSE source +| `htmx:sseOpen` | triggered when a SSE source is opened | [`htmx:swapError`](@/events.md#htmx:swapError) | triggered when an error occurs during the swap phase | [`htmx:targetError`](@/events.md#htmx:targetError) | triggered when an invalid target is specified | [`htmx:timeout`](@/events.md#htmx:timeout) | triggered when a request timeout occurs diff --git a/www/content/server-examples.md b/www/content/server-examples.md index 47cebd38..1de088cc 100644 --- a/www/content/server-examples.md +++ b/www/content/server-examples.md @@ -39,6 +39,7 @@ These examples may make it a bit easier to get started using htmx with your plat ### FastAPI - <https://github.com/renceInbox/fastapi-todo> +- <https://github.com/AutomationPanda/bulldoggy-reminders-app> ### Flask |