itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 15:25:26 +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 = "hx-on"
title: </> htmx - hx-on +++
---
## `hx-on` ## `hx-on`

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

@ -7,14 +7,20 @@ request. The value of this attribute can be:
* a CSS query selector of the element to target * 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 * `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. * `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) (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. * `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: 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 # 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 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 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 ##### Details