itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-27 13:01:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix up merge

Browse Source
This commit is contained in:
Carson Gross 2023-04-06 11:14:33 -06:00
parent 47bdec5fbc
commit b71e3e380b
5 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

7
www/attributes/hx-on.md → www/content/attributes/hx-on.md
View File

@ -1,7 +1,6 @@
---
layout: layout.njk
title: </> htmx - hx-on
---
+++
title = "hx-on"
+++
## `hx-on`

22
www/content/attributes/hx-target.md
View File

@ -4,17 +4,23 @@ 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
`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)
* `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)
* 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:

11
www/essays/architectural-sympathy.md → www/content/essays/architectural-sympathy.md
View File

@ -1,7 +1,10 @@
---
layout: layout.njk
title: Architectural Sympathy
---
+++
title = "Architectural Sympathy"
date = 2023-04-06
updated = 2023-04-06
[taxonomies]
+++
# Mechanical Sympathy & Architectural Sympathy

2
www/content/events.md
View File

@ -413,7 +413,7 @@ Timeout time can be set using `htmx.config.timeout` or per element using [`hx-re
This event is triggered whenever an AJAX request would be, even if no AJAX request is specified. It
is primarily intended to allow `hx-trigger` to execute client-side scripts; AJAX requests have more
granular events available, like [`htmx:beforeRequest`](#htmx:beforeRequest) or [`htmx:afterSend`](#htmx:afterSend).
granular events available, like [`htmx:beforeRequest`](#htmx:beforeRequest) or [`htmx:afterRequest`](#htmx:afterRequest).
##### Details