diff --git a/www/attributes/hx-preserve.md b/www/attributes/hx-preserve.md index c70a3287..7107ef07 100644 --- a/www/attributes/hx-preserve.md +++ b/www/attributes/hx-preserve.md @@ -5,7 +5,8 @@ title: htmx - hx-preserve ## `hx-preserve` -The `hx-preserve` attribute allows you to keep a section of content unchanged between HTML replacement. When hx-preserve is set to `true`, an element is preserved (by id) even if the surrounding HTML is updated by htmx. +The `hx-preserve` attribute allows you to keep a section of content unchanged between HTML replacement. When hx-preserve is set to `true`, an element is preserved (by id) even if the surrounding HTML is updated by htmx. An element *must* have an `id` to be preserved +properly. Here is an example of a youtube embed, which would be unaffected an htmx request: @@ -17,4 +18,4 @@ Here is an example of a youtube embed, which would be unaffected an htmx request ### Notes -* `hx-select` is not inherited +* `hx-preserve` is not inherited diff --git a/www/docs.md b/www/docs.md index 7b4d5328..beb354ac 100644 --- a/www/docs.md +++ b/www/docs.md @@ -411,6 +411,12 @@ Note that out of band elements must be in the top level of the response, and not If you want to select a subset of the response HTML to swap into the target, you can use the [hx-select](/attributes/hx-select) attribute, which takes a CSS selector and selects the matching elements from the response. +#### Preserving Content During A Swap + +If there is content that you wish to be preserved across swaps (e.g. a video player that you wish to remain playing +even if a swap occurs) you can use the [hx-preserve](/attributes/hx-preserve) +attribute on the elements you wish to be preserved. + ### [Parameters](#parameters) By default, an element that causes a request will include its value if it has one. If the element is a form it diff --git a/www/reference.md b/www/reference.md index a78db550..44c08e4e 100644 --- a/www/reference.md +++ b/www/reference.md @@ -32,6 +32,7 @@ title: htmx - Attributes | [`hx-params`](/attributes/hx-params) | filters the parameters that will be submitted with a request | [`hx-patch`](/attributes/hx-patch) | issues a `PATCH` to the specified URL | [`hx-post`](/attributes/hx-post) | issues a `POST` to the specified URL +| [`hx-preserve`](/attributes/hx-preserve) | preserves an element between requests | [`hx-prompt`](/attributes/hx-prompt) | shows a prompt before submitting a request | [`hx-push-url`](/attributes/hx-push-url) | pushes the URL into the location bar, creating a new history entry | [`hx-put`](/attributes/hx-put) | issues a `PUT` to the specified URL