summaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
authorCarson Gross <carson@bigsky.software>2025-03-25 21:33:32 -0600
committerCarson Gross <carson@bigsky.software>2025-03-25 21:33:32 -0600
commit15085704f2117f6d5f343f9cd3f69bce4ba7a4dc (patch)
tree611ae601ba97c4de96422ff25ad7135f0ff2c63f
parent0d7434f9986edd30cd8d4ac4cdfb289a95164ba6 (diff)
parentd1aa89192fe3df1baec96e24d8c798f57bacc57d (diff)
downloadhtmx-15085704f2117f6d5f343f9cd3f69bce4ba7a4dc.tar.gz
htmx-15085704f2117f6d5f343f9cd3f69bce4ba7a4dc.zip
Merge remote-tracking branch 'origin/master'
-rw-r--r--www/content/attributes/hx-get.md3
-rw-r--r--www/content/attributes/hx-select-oob.md2
-rw-r--r--www/content/attributes/hx-trigger.md4
-rw-r--r--www/content/essays/template-fragments.md1
-rw-r--r--www/content/extensions/_index.md5
-rw-r--r--www/content/extensions/idiomorph.md11
-rw-r--r--www/content/extensions/sse.md2
7 files changed, 17 insertions, 11 deletions
diff --git a/www/content/attributes/hx-get.md b/www/content/attributes/hx-get.md
index 58014fe3..9d7af7a0 100644
--- a/www/content/attributes/hx-get.md
+++ b/www/content/attributes/hx-get.md
@@ -18,8 +18,9 @@ This example will cause the `button` to issue a `GET` to `/example` and swap the
### Notes
* `hx-get` is not inherited
-* By default `hx-get` does not include any parameters. You can use the [hx-params](@/attributes/hx-params.md)
+* By default `hx-get` usually does not include any parameters. You can use the [hx-params](@/attributes/hx-params.md)
attribute to change this
+ * NB: If the element with the `hx-get` attribute also has a value, this will be included as a parameter unless explicitly removed
* You can control the target of the swap using the [hx-target](@/attributes/hx-target.md) attribute
* You can control the swap strategy by using the [hx-swap](@/attributes/hx-swap.md) attribute
* You can control what event triggers the request with the [hx-trigger](@/attributes/hx-trigger.md) attribute
diff --git a/www/content/attributes/hx-select-oob.md b/www/content/attributes/hx-select-oob.md
index 5449b393..ac35ba75 100644
--- a/www/content/attributes/hx-select-oob.md
+++ b/www/content/attributes/hx-select-oob.md
@@ -28,7 +28,7 @@ which will replace the entire button in the DOM, and, in addition, pick out an e
in the response and swap it in for div in the DOM with the same ID.
Each value in the comma separated list of values can specify any valid [`hx-swap`](@/attributes/hx-swap.md)
-strategy by separating the selector and the swap strategy with a `:`.
+strategy by separating the selector and the swap strategy with a `:`, with the strategy otherwise defaulting to `outerHTML`.
For example, to prepend the alert content instead of replacing it:
diff --git a/www/content/attributes/hx-trigger.md b/www/content/attributes/hx-trigger.md
index 5dcbcc77..a2410f40 100644
--- a/www/content/attributes/hx-trigger.md
+++ b/www/content/attributes/hx-trigger.md
@@ -86,12 +86,12 @@ but with a target filter for a child element
* `all` - queue all events (issue a request for each event)
* `none` - do not queue new events
-Here is an example of a search box that searches on `keyup`, but only if the search value has changed
+Here is an example of a search box that searches on `input`, but only if the search value has changed
and the user hasn't typed anything new for 1 second:
```html
<input name="q"
- hx-get="/search" hx-trigger="keyup changed delay:1s"
+ hx-get="/search" hx-trigger="input changed delay:1s"
hx-target="#search-results"/>
```
diff --git a/www/content/essays/template-fragments.md b/www/content/essays/template-fragments.md
index 2bfb0969..c8b820ee 100644
--- a/www/content/essays/template-fragments.md
+++ b/www/content/essays/template-fragments.md
@@ -160,6 +160,7 @@ Here are some known implementations of the fragment concept:
* [chameleon_partials package](https://github.com/mikeckennedy/chameleon_partials)
* [htmlgenerator](https://github.com/basxsoftwareassociation/htmlgenerator)
* [django-template-partials](https://pypi.org/project/django-template-partials/) ([repository](https://github.com/carltongibson/django-template-partials))
+ * [django-block-fragments](https://github.com/medihack/django-block-fragments)
* .NET
* [Giraffe.ViewEngine.Htmx](https://github.com/bit-badger/Giraffe.Htmx/tree/main/src/ViewEngine.Htmx)
* Rust
diff --git a/www/content/extensions/_index.md b/www/content/extensions/_index.md
index 80a48e78..790842a3 100644
--- a/www/content/extensions/_index.md
+++ b/www/content/extensions/_index.md
@@ -31,12 +31,13 @@ htmx extensions are split into two categories:
|--------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| [ajax-header](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/ajax-header/README.md) | Adds an `X-Requested-With` header to all requests made by htmx |
| [alpine-morph](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/alpine-morph/README.md) | Alpine.js now has a lightweight [morph plugin](https://alpinejs.dev/plugins/morph) and this extension allows you to use it as the swapping mechanism in htmx which is necessary to retain Alpine state when you have entire Alpine components swapped by htmx. |
+| [attribute-tools](https://github.com/jamcole/htmx-ext-attribute-tools/blob/main/README.md) | The `attribute-tools` extension allows you to specify attributes that will be swapped onto or off of the elements by using an `attributes` or `data-attributes` attribute. (similar to class-tools) |
| [class-tools](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/class-tools/README.md) | The `class-tools` extension allows you to specify CSS classes that will be swapped onto or off of the elements by using a `classes` or `data-classes` attribute. |
| [client-side-templates](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/client-side-templates/README.md) | This extension supports transforming a JSON/XML request response into HTML via a client-side template before it is swapped into the DOM. |
| [debug](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/debug/README.md) | This extension includes log all htmx events for the element it is on, either through the `console.debug` function or through the `console.log` function with a `DEBUG:` prefix. |
-| [disable-element](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/disable-element/README.md) | This extension disables an element during an htmx request, when configured on the element triggering the request. Note that this functionality is now part of the core of htmx via the `hx-disabled-elt` attribute |
+| [disable-element](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/disable-element/README.md) | This extension disables an element during an htmx request, when configured on the element triggering the request. Note that this functionality is now part of the core of htmx via the `hx-disabled-elt` attribute. |
| [event-header](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/event-header/README.md) | This extension adds the `Triggering-Event` header to requests. The value of the header is a JSON serialized version of the event that triggered the request. |
-| [include-vals](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/include-vals/README.md) | The `include-vals` extension allows you to programmatically include values in a request with a `include-vals` attribute. The value of this attribute is one or more name/value pairs, which will be evaluated as the fields in a javascript object literal. |
+| [include-vals](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/include-vals/README.md) | The `include-vals` extension allows you to programmatically include values in a request with a `include-vals` attribute. Note that this functionality is now part of the core of htmx via the `hx-vals` attribute. |
| [json-enc](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/json-enc/README.md) | This extension encodes parameters in JSON format instead of url format. |
| [form-json](https://github.com/xehrad/form-json/blob/main/README.md) | Similar to `json-enc`, but with **type preservation**. Converts form data into structured JSON while maintaining correct types for numbers, booleans, and files (Base64-encoded). Supports nested structures using dot (`.`) or bracket (`[]`) notation. |
| [json-enc-custom](https://github.com/Emtyloc/json-enc-custom/blob/main/README.md) | This extension works similarly to json-enc but allows for very complex structures, such as embedding JSON objects, lists, or handling indexes, just by using the name attribute. |
diff --git a/www/content/extensions/idiomorph.md b/www/content/extensions/idiomorph.md
index bd75dad7..60ea0a83 100644
--- a/www/content/extensions/idiomorph.md
+++ b/www/content/extensions/idiomorph.md
@@ -16,19 +16,22 @@ The fastest way to install `idiomorph` is to load it via a CDN. Remember to alwa
```HTML
<head>
<script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
- <script src="https://unpkg.com/idiomorph@0.3.0" integrity="sha384-tg/2Ca9U/RohyxmGCb8qJVR3j9cswtKbdRSXOaPX/aDDOW1bfbeyV+7G9ifYF4bC" crossorigin="anonymous"></script>
+ <script src="https://unpkg.com/idiomorph@0.7.3" integrity="sha384-JcorokHTL/m+D6ZHe2+yFVQopVwZ+91GxAPDyEZ6/A/OEPGEx1+MeNSe2OGvoRS9" crossorigin="anonymous"></script>
+ <script src="https://unpkg.com/idiomorph@0.7.3/dist/idiomorph-ext.min.js" integrity="sha384-szktAZju9fwY15dZ6D2FKFN4eZoltuXiHStNDJWK9+FARrxJtquql828JzikODob" crossorigin="anonymous"></script>
</head>
<body hx-ext="morph">
```
-An unminified version is also available at https://unpkg.com/idiomorph/dist/idiomorph.js.
+Unminified versions are also available at:
+https://unpkg.com/idiomorph/dist/idiomorph.js
+https://unpkg.com/idiomorph/dist/idiomorph-ext.js
-While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `idiomorph` is to simply copy it into your project. Download the extension from `https://unpkg.com/idiomorph`, add it to the appropriate directory in your project and include it where necessary with a `<script>` tag.
+While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `idiomorph` is to simply copy it into your project. Download idiomorph and its htmx extension from `https://unpkg.com/idiomorph` and `https://unpkg.com/idiomorph/dist/idiomorph-ext.min.js`, add them to the appropriate directory in your project and include them where necessary with `<script>` tags.
For npm-style build systems, you can install `idiomorph` via [npm](https://www.npmjs.com/):
```shell
npm install idiomorph
```
-After installing, you'll need to use appropriate tooling to bundle `node_modules/idiomorph/dist/idiomorph.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code.
+After installing, you'll need to use appropriate tooling to bundle `node_modules/idiomorph/dist/idiomorph.js` (or `.min.js`) and `node_modules/idiomorph/dist/idiomorph-ext.js`. For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code.
If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):
- Install `htmx.org` and `idiomorph` via npm
diff --git a/www/content/extensions/sse.md b/www/content/extensions/sse.md
index bf1ae2e9..12e36a3f 100644
--- a/www/content/extensions/sse.md
+++ b/www/content/extensions/sse.md
@@ -10,7 +10,7 @@ your htmx webpage in real-time.
SSE is a lightweight alternative to WebSockets that works over existing HTTP connections, so it is easy to use through
proxy servers and firewalls. Remember, SSE is a uni-directional service, so you cannot send any messages to an SSE
server once the connection has been established. If you need bi-directional communication, then you should consider
-using [WebSockets](@web-sockets.md) instead.
+using [WebSockets](@/extensions/ws.md) instead.
This extension replaces the experimental `hx-sse` attribute built into previous versions of htmx. For help migrating
from older versions, see the migration guide at the bottom of this page.