docs update for v1.1.0

This commit is contained in:
carson 2021-01-03 15:26:51 -07:00
parent 92c4c14670
commit a41f689f23
4 changed files with 79 additions and 2 deletions

View File

@ -1,11 +1,32 @@
# Changelog
## [1.0.2] - 202?-??-??
## [1.1.0] - 2021-1-8
* Newly added [preload extension](https://htmx.org/extensions/preload/) allows you to preload resources for lower
latency requests!
* Support the `ignore:` modifier for extensions
* Updated form variable order inclusion to include the enclosing form *last* so that, in the presence of multiple
values, the most relevant value is the most likely to be selected by the server
* Support for the [`htmx.ajax()`](https://dev.htmx.org/api/#ajax) javascript function, to issue an htmx-style ajax
request from javascript
* Removed the following htmx request headers for better cache behavior: `HX-Event-Target`, `HX-Active-Element`,
`HX-Active-Element-Name`, `HX-Active-Element`
* Added the [`hx-preserve`](https://dev.htmx.org/attributes/hx-preserve) attribute, which allows
you to preserve elements across requests (for example, to keep a video element playing properly)
* The [`path-deps](https://dev.htmx.org/extensions/path-deps/#refresh) now surfaces a small api
for refreshing path dependencies manually in javascript
* Now support the `from:` clause on [`hx-trigger`](https://dev.htmx.org/attributes/hx-trigger) to
allow an element to respond to events on other elements.
* Added the `htmx:beforeProcessNode` event, renamed the (previously undocumented) `htmx:processedNode` to `htmx:afterProcessNode`
* Added `closest` syntax support for the [`hx-indicator`](https://dev.htmx.org/attributes/hx-indicator) attribute
* Bug fixes & improvements
## [1.0.2] - 2020-12-12
* Extend all API methods to take a string selector as well as an element
* Out of band swap elements need not be top level now
* [`hx-swap-oob`](https:/htmx.org/attributes/hx-swap-oob) now can accept a CSS selector to retarget with
* [`hx-swap-oob`](https://htmx.org/attributes/hx-swap-oob) now can accept a CSS selector to retarget with
## [1.0.1] - 2020-12-04

View File

@ -26,6 +26,40 @@ This method adds a class to the given element.
htmx.addClass(htmx.find('#demo'), 'myClass');
```
### <a name="ajax"></a> Method - [`htmx.ajax()`](#ajax)
Issues an htmx-style AJAX request
##### Parameters
* `verb` - 'GET', 'POST', etc.
* `path` - the URL path to make the AJAX
* `element` - the element to target (defaults to the `body`)
or
* `verb` - 'GET', 'POST', etc.
* `path` - the URL path to make the AJAX
* `selector` - a selector for the target
or
* `verb` - 'GET', 'POST', etc.
* `path` - the URL path to make the AJAX
* `context` - a context object that contains any of the following
* `source` - the source element of the request
* `event` - an event that "triggered" the request
* `handler` - a callback that will handle the response HTML
* `target` - the target to swap the response into
##### Example
```js
// issue a GET to /example and put the response HTML into #myDiv
htmx.ajax('GET', '/example', '#myDiv')
```
### <a name="closest"></a> Method - [`htmx.closest()`](#closest)
Finds the closest matching element in the given elements parentage, inclusive of the element

View File

@ -0,0 +1,21 @@
---
layout: layout.njk
title: </> htmx - hx-preserve
---
## `hx-preserve`
The `hx-preserve` attribute allows you to keep a section of content constant between HTML replacement. When hx-preserve is set to `true`, an element preserved (by id) even if the
surrounding HTML is updated by htmx.
Here is an example of a youtube embed, which would survive an htmx request:
```html
<div>
<iframe hx-preserve='true' id='iframe1' width="1268" height="720" src="https://www.youtube.com/embed/Z1oB2EDu5XA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
```
### Notes
* `hx-select` is not inherited

View File

@ -146,6 +146,7 @@ title: </> htmx - Attributes
| Method | Description |
|-------|-------------|
| [`htmx.addClass()`](/api#addClass) | Adds a class to the given element
| [`htmx.ajax()`](/api#ajax) | Issues an htmx-style ajax request
| [`htmx.closest()`](/api#closest) | Finds the closest parent to the given element matching the selector
| [`htmx.config`](/api#config) | A property that holds the current htmx config object
| [`htmx.createEventSource`](/api#createEventSource) | A property holding the function to create SSE EventSource objects for htmx