mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-28 21:41:40 +00:00
more docs
This commit is contained in:
carson
parent
7173b7bb80
commit
19adddcb68
21
www/attributes/kt-prompt.md
Normal file
21
www/attributes/kt-prompt.md
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
layout: layout.njk
|
||||
title: </> kutty - kt-prompt
|
||||
---
|
||||
|
||||
## `kt-prompt`
|
||||
|
||||
The `kt-prompt` attribute allows you to show a prompt before issuing a request. The value of
|
||||
the prompt will be included in the requst in the `X-KT-Prompt` header.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```html
|
||||
<button kt-delete="/account" kt-prompt="Enter your account name to confirm deletion">
|
||||
Delete My Account
|
||||
</button>
|
||||
```
|
||||
|
||||
### Notes
|
||||
|
||||
* `kt-prompt` is inherited and can be placed on a parent element
|
||||
26
www/attributes/kt-push-url.md
Normal file
26
www/attributes/kt-push-url.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
layout: layout.njk
|
||||
title: </> kutty - kt-push-url
|
||||
---
|
||||
|
||||
## `kt-push-url`
|
||||
|
||||
The `kt-push-url` attribute allows you to "push" a new entry into the browser location bar, which creates
|
||||
a new history entry, allowing back-button and general history navigation. The possible values of this
|
||||
attribute are `true` and `false`.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```html
|
||||
<div kt-get="/account" kt-push-url="true">
|
||||
Go to My Account
|
||||
</div>
|
||||
```
|
||||
|
||||
This will cause kutty to snapshot the current DOM to `localStorage` and push the URL `/account' into the browser
|
||||
location bar.
|
||||
|
||||
### Notes
|
||||
|
||||
* `kt-push-url` is inherited and can be placed on a parent element
|
||||
* see also the `X-KT-Push` response header
|
||||
26
www/attributes/kt-select.md
Normal file
26
www/attributes/kt-select.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
layout: layout.njk
|
||||
title: </> kutty - kt-select
|
||||
---
|
||||
|
||||
## `kt-select`
|
||||
|
||||
The `kt-select` attribute allows you to select the content you want swapped from a response. The value of
|
||||
this attribute is a CSS query selector of the element or elements to select from the response.
|
||||
|
||||
Here is an example that selects a subset of the response content:
|
||||
|
||||
```html
|
||||
<div>
|
||||
<button kt-get="/info" kt-select="#info-details" kt-swap="outerHTML">
|
||||
Get Info!
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
So this button will issue a `GET` to `/info` and then select the element with the id `info-detail`,
|
||||
which will replace the entire button in the DOM.
|
||||
|
||||
### Notes
|
||||
|
||||
* `kt-select` is inherited and can be placed on a parent element
|
||||
24
www/attributes/kt-sse-src.md
Normal file
24
www/attributes/kt-sse-src.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
layout: layout.njk
|
||||
title: </> kutty - kt-sse-src
|
||||
---
|
||||
|
||||
## `kt-sse-src`
|
||||
|
||||
The `kt-sse-src` attribute establishes a [Server Sent Event](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)
|
||||
`EventSource`, allowing children of the element to register for server sent event triggers.
|
||||
|
||||
```html
|
||||
<div kt-sse-src="/event_stream">
|
||||
<div kt-get="/chatroom" kt-trigger="sse:chatter">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
This example establishes an SSE connection to the `event_stream` end point which then triggers
|
||||
a `GET` to the `/chatroom` url whenever the `chatter` event is seen.
|
||||
|
||||
### Notes
|
||||
|
||||
* `kt-sse-src` is not inherited
|
||||
30
www/attributes/kt-swap-oob.md
Normal file
30
www/attributes/kt-swap-oob.md
Normal file
@ -0,0 +1,30 @@
|
||||
---
|
||||
layout: layout.njk
|
||||
title: </> kutty - kt-swap-oob
|
||||
---
|
||||
|
||||
## `kt-swap-oob`
|
||||
|
||||
The `kt-swap-oob` attribute allows you specify that some content in a response should be swapped into
|
||||
the DOM somewhere other than the target, that is "Out of Band". This allows you to piggy back updates
|
||||
to other element updates on a response.
|
||||
|
||||
Consider the following response HTML:
|
||||
|
||||
```html
|
||||
<div>
|
||||
...
|
||||
</div>
|
||||
<div id="alerts" kt-swap-oob="true">
|
||||
Saved!
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
The first div will be swapped into the target the usual manner. The second div, however, will be swapped in
|
||||
as a replacement for the element with the id `alerts`, and will not end up in the target.
|
||||
|
||||
### Notes
|
||||
|
||||
* `kt-swap-oob` is not inherited
|
||||
* `kt-swap-oob` is only supported on top level elements in the response, not children
|
||||
27
www/attributes/kt-target.md
Normal file
27
www/attributes/kt-target.md
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
layout: layout.njk
|
||||
title: </> kutty - kt-target
|
||||
---
|
||||
|
||||
## `kt-target`
|
||||
|
||||
The `kt-target` attribute allows you to target a different element than the one issuing the AJAX
|
||||
request. The value of this attribute is a CSS query selector of the element to target when swapping
|
||||
new content into the DOM.
|
||||
|
||||
Here is an example that targets a div:
|
||||
|
||||
```html
|
||||
<div>
|
||||
<div id="response-div"></div>
|
||||
<button kt-post="/register" kt-target="#response-div" kt-swap="beforeEnd">
|
||||
Register!
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
The response from the `/register` url will be appended to the `div` with the id `response-div`.
|
||||
|
||||
### Notes
|
||||
|
||||
* `kt-target` is inherited and can be placed on a parent element
|
||||
@ -10,28 +10,28 @@ title: </> kutty - Attributes
|
||||
| [kt-boost](/attributes/kt-boost) | converts anchors and forms to use AJAX requests
|
||||
| [kt-classes](/attributes/kt-classes) | timed modification of classes on an element
|
||||
| [kt-confirm](/attributes/kt-confirm) | shows a confim() dialog before issuing a request
|
||||
| [kt-delete](/attributes/kt-delete) | issue a `DELETE` to the specified URL
|
||||
| [kt-delete](/attributes/kt-delete) | issues a `DELETE` to the specified URL
|
||||
| [kt-error-url](/attributes/kt-error-url) | a URL to send client-side errors to
|
||||
| [kt-get](/attributes/kt-get) | issue a `GET` to the specified URL
|
||||
| [kt-get](/attributes/kt-get) | issues a `GET` to the specified URL
|
||||
| [kt-history-elt](/attributes/kt-history-elt) | the element to snapshot and restore during history navigation
|
||||
| [kt-include](/attributes/kt-include) | include additional data in AJAX requests
|
||||
| [kt-include](/attributes/kt-include) | includes additional data in AJAX requests
|
||||
| [kt-indicator](/attributes/kt-indicator) | the element to put the `kutty-request` class on during the AJAX request
|
||||
| [kt-patch](/attributes/kt-patch) | TODO - Description
|
||||
| [kt-params](/attributes/kt-params) | filter the parameters that will be submitted with a request
|
||||
| [kt-post](/attributes/kt-post) | TODO - Description
|
||||
| kt-prompt | TODO - Description
|
||||
| kt-push-url | TODO - Description
|
||||
| [kt-put](/attributes/kt-put) | TODO - Description
|
||||
| kt-select | TODO - Description
|
||||
| kt-sse-src | TODO - Description
|
||||
| [kt-swap](/attributes/kt-swap) | TODO - Description
|
||||
| kt-swap-oob | TODO - Description
|
||||
| kt-target | TODO - Description
|
||||
| [kt-patch](/attributes/kt-patch) | issues a `PATCH` to the specified URL
|
||||
| [kt-params](/attributes/kt-params) | filters the parameters that will be submitted with a request
|
||||
| [kt-post](/attributes/kt-post) | issues a `POST` to the specified URL
|
||||
| [kt-prompt](/attributes/kt-prompt) | shows a prompt before submitting a request
|
||||
| [kt-push-url](/attributes/kt-push-url) | pushes the URL into the location bar, creating a new history entry
|
||||
| [kt-put](/attributes/kt-put) | issues a `PUT` to the specified URL
|
||||
| [kt-select](/attributes/kt-select) | selects a subset of the server response to process
|
||||
| [kt-sse-src](/attributes/kt-sse-src) | establishes an [SSE](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) source for events
|
||||
| [kt-swap](/attributes/kt-swap) | controls how the response content is swapped into the DOM (e.g. 'outerHTML' or 'beforeEnd')
|
||||
| [kt-swap-oob](/attributes/kt-swap) | marks content in a response as being "Out of Band", i.e. swapped somewhere other than the target
|
||||
| [kt-target](/attributes/kt-target) | specifies the target element to be swapped
|
||||
| kt-trigger | TODO - Description
|
||||
|
||||
## CSS Class Reference
|
||||
|
||||
| Attribute | Description |
|
||||
| Class | Description |
|
||||
|-----------|-------------|
|
||||
| kutty-request | TODO
|
||||
| kutty-indicator | TODO
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user