mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-02 07:21:05 +00:00
docs update for v1.1.0
This commit is contained in:
parent
92c4c14670
commit
a41f689f23
25
CHANGELOG.md
25
CHANGELOG.md
@ -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
|
||||
|
||||
|
34
www/api.md
34
www/api.md
@ -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
|
||||
|
21
www/attributes/hx-preserve.md
Normal file
21
www/attributes/hx-preserve.md
Normal 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
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user