diff options
Diffstat (limited to 'www/attributes')
-rw-r--r-- | www/attributes/hx-boost.md (renamed from www/attributes/kt-boost.md) | 10 | ||||
-rw-r--r-- | www/attributes/hx-classes.md (renamed from www/attributes/kt-classes.md) | 20 | ||||
-rw-r--r-- | www/attributes/hx-confirm.md (renamed from www/attributes/kt-confirm.md) | 10 | ||||
-rw-r--r-- | www/attributes/hx-delete.md (renamed from www/attributes/kt-delete.md) | 16 | ||||
-rw-r--r-- | www/attributes/hx-error-url.md | 24 | ||||
-rw-r--r-- | www/attributes/hx-get.md | 25 | ||||
-rw-r--r-- | www/attributes/hx-history-elt.md (renamed from www/attributes/kt-history-elt.md) | 12 | ||||
-rw-r--r-- | www/attributes/hx-include.md (renamed from www/attributes/kt-include.md) | 10 | ||||
-rw-r--r-- | www/attributes/hx-indicator.md (renamed from www/attributes/kt-indicator.md) | 40 | ||||
-rw-r--r-- | www/attributes/hx-params.md (renamed from www/attributes/kt-params.md) | 10 | ||||
-rw-r--r-- | www/attributes/hx-patch.md (renamed from www/attributes/kt-patch.md) | 16 | ||||
-rw-r--r-- | www/attributes/hx-post.md | 25 | ||||
-rw-r--r-- | www/attributes/hx-prompt.md | 21 | ||||
-rw-r--r-- | www/attributes/hx-push-url.md | 26 | ||||
-rw-r--r-- | www/attributes/hx-put.md (renamed from www/attributes/kt-put.md) | 16 | ||||
-rw-r--r-- | www/attributes/hx-select.md (renamed from www/attributes/kt-select.md) | 10 | ||||
-rw-r--r-- | www/attributes/hx-sse-src.md (renamed from www/attributes/kt-sse-src.md) | 12 | ||||
-rw-r--r-- | www/attributes/hx-swap-oob.md (renamed from www/attributes/kt-swap-oob.md) | 12 | ||||
-rw-r--r-- | www/attributes/hx-swap.md (renamed from www/attributes/kt-swap.md) | 20 | ||||
-rw-r--r-- | www/attributes/hx-target.md (renamed from www/attributes/kt-target.md) | 10 | ||||
-rw-r--r-- | www/attributes/hx-trigger.md (renamed from www/attributes/kt-trigger.md) | 22 | ||||
-rw-r--r-- | www/attributes/kt-error-url.md | 24 | ||||
-rw-r--r-- | www/attributes/kt-get.md | 25 | ||||
-rw-r--r-- | www/attributes/kt-post.md | 25 | ||||
-rw-r--r-- | www/attributes/kt-prompt.md | 21 | ||||
-rw-r--r-- | www/attributes/kt-push-url.md | 26 |
26 files changed, 244 insertions, 244 deletions
diff --git a/www/attributes/kt-boost.md b/www/attributes/hx-boost.md index 99d58525..a6ab1742 100644 --- a/www/attributes/kt-boost.md +++ b/www/attributes/hx-boost.md @@ -1,11 +1,11 @@ --- layout: layout.njk -title: </> kutty - kt-boost +title: </> htmx - hx-boost --- -## `kt-boost` +## `hx-boost` -The `kt-boost` attribute allows you to "boost" normal anchors and form tags to use AJAX instead. This +The `hx-boost` attribute allows you to "boost" normal anchors and form tags to use AJAX instead. This has the [nice fallback](https://en.wikipedia.org/wiki/Progressive_enhancement) that, if the user does not have javascript enabled, the site will continue to work. @@ -21,7 +21,7 @@ swap will be used. Here is an example of some boosted links: ```html -<div kt-boost="true"> +<div hx-boost="true"> <a href="/page1">Go To Page 1</a> <a href="/page2">Go To Page 2</a> </div> @@ -29,6 +29,6 @@ Here is an example of some boosted links: ### Notes -* `kt-boost` is inherited and can be placed on a parent element +* `hx-boost` is inherited and can be placed on a parent element * Only links that are to the same domain and that are not local anchors will be boosted * All requests are done via AJAX, so keep that in mind when doing things like redirects
\ No newline at end of file diff --git a/www/attributes/kt-classes.md b/www/attributes/hx-classes.md index 87ca3844..37f9f846 100644 --- a/www/attributes/kt-classes.md +++ b/www/attributes/hx-classes.md @@ -1,15 +1,15 @@ --- layout: layout.njk -title: </> kutty - kt-classes +title: </> htmx - hx-classes --- -## `kt-classes` +## `hx-classes` -The `kt-classes` attribute allows you to specify CSS classes that will be swapped onto the element that +The `hx-classes` attribute allows you to specify CSS classes that will be swapped onto the element that the attribute is on. This allows you to apply [CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) to your HTML without resorting to javascript. -A `kt-classes` attribute value consists of "runs", which are separated by an `&` character. All +A `hx-classes` attribute value consists of "runs", which are separated by an `&` character. All class operations within a given run will be applied sequentially, with the delay specified. Within a run, a `,` character separates distinct class operations. @@ -20,16 +20,16 @@ optionally followed by a colon `:` and a time delay. Here are some examples: ```html -<div kt-classes="add foo"/> <!-- adds the class "foo" after 100ms --> -<div kt-classes="remove bar:1s"/> <!-- removes the class "bar" after 1s --> -<div kt-classes="remove bar:1s, add foo:1s"/> <!-- removes the class "bar" after 1s +<div hx-classes="add foo"/> <!-- adds the class "foo" after 100ms --> +<div hx-classes="remove bar:1s"/> <!-- removes the class "bar" after 1s --> +<div hx-classes="remove bar:1s, add foo:1s"/> <!-- removes the class "bar" after 1s then adds the class "foo" 1s after that --> -<div kt-classes="remove bar:1s & add foo:1s"/> <!-- removes the class "bar" and adds +<div hx-classes="remove bar:1s & add foo:1s"/> <!-- removes the class "bar" and adds class "foo" after 1s --> -<div kt-classes="toggle foo:1s"/> <!-- toggles the class "foo" every 1s --> +<div hx-classes="toggle foo:1s"/> <!-- toggles the class "foo" every 1s --> ``` ### Notes -* `kt-classes` is not inherited +* `hx-classes` is not inherited * The default delay if none is specified is 100ms diff --git a/www/attributes/kt-confirm.md b/www/attributes/hx-confirm.md index f8608724..5de0186b 100644 --- a/www/attributes/kt-confirm.md +++ b/www/attributes/hx-confirm.md @@ -1,21 +1,21 @@ --- layout: layout.njk -title: </> kutty - kt-confirm +title: </> htmx - hx-confirm --- -## `kt-confirm` +## `hx-confirm` -The `kt-confirm` attribute allows you to confirm an action before issuing a request. This can be useful +The `hx-confirm` attribute allows you to confirm an action before issuing a request. This can be useful in cases where the action is destructive and you want to ensure that the user really wants to do it. Here is an example: ```html -<button kt-delete="/account" kt-confirm="Are you sure you wish to delete your account?"> +<button hx-delete="/account" hx-confirm="Are you sure you wish to delete your account?"> Delete My Account </button> ``` ### Notes -* `kt-confirm` is inherited and can be placed on a parent element +* `hx-confirm` is inherited and can be placed on a parent element diff --git a/www/attributes/kt-delete.md b/www/attributes/hx-delete.md index a41a05a6..561e15bd 100644 --- a/www/attributes/kt-delete.md +++ b/www/attributes/hx-delete.md @@ -1,15 +1,15 @@ --- layout: layout.njk -title: </> kutty - kt-delete +title: </> htmx - hx-delete --- -## `kt-delete` +## `hx-delete` -The `kt-delete` attribute will cause an element to issue a `DELETE` to the specified URL and swap +The `hx-delete` attribute will cause an element to issue a `DELETE` to the specified URL and swap the HTML into the DOM using a swap strategy: ```html -<button kt-delete="/account" kt-target="body"> +<button hx-delete="/account" hx-target="body"> Delete Your Account </button> ``` @@ -19,9 +19,9 @@ This example will cause the `button` to issue a `DELETE` to `/account` and swap ### Notes -* `kt-delete` is not inherited +* `hx-delete` is not inherited * Since most browsers do not support issuing an actual `DELETE`, the request will actually be issued as a `POST`, with the [`X-HTTP-Method-Override`](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields) header set to `DELETE`. -* You can control the target of the swap using the [kt-target](/attributes/kt-target) attribute -* You can control the swap strategy by using the [kt-swap](/attributes/kt-swap) attribute -* You can control what event triggers the request with the [kt-trigger](/attributes/kt-trigger) attribute +* You can control the target of the swap using the [hx-target](/attributes/hx-target) attribute +* You can control the swap strategy by using the [hx-swap](/attributes/hx-swap) attribute +* You can control what event triggers the request with the [hx-trigger](/attributes/hx-trigger) attribute diff --git a/www/attributes/hx-error-url.md b/www/attributes/hx-error-url.md new file mode 100644 index 00000000..b6d2715b --- /dev/null +++ b/www/attributes/hx-error-url.md @@ -0,0 +1,24 @@ +--- +layout: layout.njk +title: </> htmx - hx-error-url +--- + +## `hx-error-url` + +The `hx-error-url` attribute allows you to send client-side errors to a specified URL. It is typically put on the +body tag, so all errors are caught and send to the server. + +```html +<body hx-error-url="/errors">\ + +</body> +``` +When a client side error is caught by htmx it will be `POST`-ed to the given URL, with the following JSON format: + +```json + { "elt": elt.id, "event": eventName, "detail" : detail } +``` + +### Notes + +* `hx-error-url` is inherited and can be placed on a parent element diff --git a/www/attributes/hx-get.md b/www/attributes/hx-get.md new file mode 100644 index 00000000..8a1d1185 --- /dev/null +++ b/www/attributes/hx-get.md @@ -0,0 +1,25 @@ +--- +layout: layout.njk +title: </> htmx - hx-get +--- + +## `hx-get` + +The `hx-get` attribute will cause an element to issue a `GET` to the specified URL and swap +the HTML into the DOM using a swap strategy: + +```html + <div hx-get="/example">Get Some HTML</div> +``` + +This example will cause the `div` to issue a `GET` to `/example` and swap the returned HTML into + the `innerHTML` of the `div`. + +### Notes + +* `hx-get` is not inherited +* By default `hx-get` does not include any parameters. You can use the [hx-params](/attributes/hx-params) + attribute to change this +* You can control the target of the swap using the [hx-target](/attributes/hx-target) attribute +* You can control the swap strategy by using the [hx-swap](/attributes/hx-swap) attribute +* You can control what event triggers the request with the [hx-trigger](/attributes/hx-trigger) attribute diff --git a/www/attributes/kt-history-elt.md b/www/attributes/hx-history-elt.md index d074c254..addc1ddb 100644 --- a/www/attributes/kt-history-elt.md +++ b/www/attributes/hx-history-elt.md @@ -1,14 +1,14 @@ --- layout: layout.njk -title: </> kutty - kt-history-elt +title: </> htmx - hx-history-elt --- -## `kt-history-elt` +## `hx-history-elt` -The `kt-history-elt` attribute allows you to specify the element that will be used to snapshot and +The `hx-history-elt` attribute allows you to specify the element that will be used to snapshot and restore page state during navigation. By default, the `body` tag is used. This is typically good enough for most setups, but you may want to narrow it down to a child element. Just make -sure that the element is always visible in your application, or kutty will not be able to restore +sure that the element is always visible in your application, or htmx will not be able to restore history navigation properly. @@ -17,7 +17,7 @@ Here is an example: ```html <html> <body> -<div id="content" kt-history-elt> +<div id="content" hx-history-elt> ... </div> </body> @@ -26,5 +26,5 @@ Here is an example: ### Notes -* `kt-history-elt` is not inherited +* `hx-history-elt` is not inherited * In most cases we don't recommend narrowing the history snapshot
\ No newline at end of file diff --git a/www/attributes/kt-include.md b/www/attributes/hx-include.md index 5b624a22..f608539e 100644 --- a/www/attributes/kt-include.md +++ b/www/attributes/hx-include.md @@ -1,18 +1,18 @@ --- layout: layout.njk -title: </> kutty - kt-include +title: </> htmx - hx-include --- -## `kt-include` +## `hx-include` -The `kt-include` attribute allows you to include additional element values in an AJAX request. The value of +The `hx-include` attribute allows you to include additional element values in an AJAX request. The value of this attribute is a CSS query selector of the element or elements to include in the query. Here is an example that includes a separate input value: ```html <div> - <button kt-post="/register" kt-include="[name='email']"> + <button hx-post="/register" hx-include="[name='email']"> Register! </button> Enter email: <input name="email" type="email"/> @@ -24,4 +24,4 @@ the value automatically, but it demonstrates the concept. ### Notes -* `kt-include` is inherited and can be placed on a parent element +* `hx-include` is inherited and can be placed on a parent element diff --git a/www/attributes/kt-indicator.md b/www/attributes/hx-indicator.md index 77992864..5a35a182 100644 --- a/www/attributes/kt-indicator.md +++ b/www/attributes/hx-indicator.md @@ -1,11 +1,11 @@ --- layout: layout.njk -title: </> kutty - kt-indicator +title: </> htmx - hx-indicator --- -## `kt-indicator` +## `hx-indicator` -The `kt-indicator` attribute allows you to specify the element that will have the `kutty-request` class +The `hx-indicator` attribute allows you to specify the element that will have the `htmx-request` class added to it for the duration of the request. This can be used to show spinners or progress indicators while the request is in flight. @@ -15,26 +15,26 @@ Here is an example with a spinner adjacent to the button: ```html <div> - <button kt-post="/example" kt-indicator="#spinner"> + <button hx-post="/example" hx-indicator="#spinner"> Post It! </button> - <img id="spinner" class="kutty-indicator" src="/img/bars.svg"/> + <img id="spinner" class="htmx-indicator" src="/img/bars.svg"/> </div> ``` -When a request is in flight, this will cause the `kutty-request` class to be added to the `#spinner` -image. The image also has the `kutty-indicator` class on it, which defines an opacity transition +When a request is in flight, this will cause the `htmx-request` class to be added to the `#spinner` +image. The image also has the `htmx-indicator` class on it, which defines an opacity transition that will show the spinner: ```css - .kutty-indicator{ + .htmx-indicator{ opacity:0; transition: opacity 500ms ease-in; } - .kutty-request .kutty-indicator{ + .htmx-request .htmx-indicator{ opacity:1 } - .kutty-request.kutty-indicator{ + .htmx-request.htmx-indicator{ opacity:1 } ``` @@ -43,13 +43,13 @@ If you would prefer a different effect for showing the spinner you could define CSS. Here is an example that uses `display` rather than opacity: ```css - .kutty-indicator{ + .htmx-indicator{ display:none; } - .kutty-request .my-indicator{ + .htmx-request .my-indicator{ display:inline; } - .kutty-request.my-indicator{ + .htmx-request.my-indicator{ display:inline; } ``` @@ -57,14 +57,14 @@ CSS. Here is an example that uses `display` rather than opacity: Note that the target of the `ic-indicator` selector need not be the exact element that you want to show: it can be any element in the parent hierarchy of the indicator. -Finally, note that the `kutty-request` class by default is added to the element causing +Finally, note that the `htmx-request` class by default is added to the element causing the request, so you can place an indicator inside of that element and not need to explictly call it out with the `ic-indicator` attribute: ```html -<button kt-post="/example"> +<button hx-post="/example"> Post It! - <img class="kutty-indicator" src="/img/bars.svg"/> + <img class="htmx-indicator" src="/img/bars.svg"/> </button> ``` @@ -72,13 +72,13 @@ call it out with the `ic-indicator` attribute: This simulates what a spinner might look like in that situation: -<button class="btn" kt-classes="toggle kutty-request:3s"> +<button class="btn" hx-classes="toggle htmx-request:3s"> Post It! - <img class="kutty-indicator" src="/img/bars.svg"/> + <img class="htmx-indicator" src="/img/bars.svg"/> </button> ### Notes -* `kt-indicator` is inherited and can be placed on a parent element -* In the absence of an explicit indicator, the `kutty-request` class will be added to the element triggering the +* `hx-indicator` is inherited and can be placed on a parent element +* In the absence of an explicit indicator, the `htmx-request` class will be added to the element triggering the request
\ No newline at end of file diff --git a/www/attributes/kt-params.md b/www/attributes/hx-params.md index b2d0f3f6..131d11a3 100644 --- a/www/attributes/kt-params.md +++ b/www/attributes/hx-params.md @@ -1,11 +1,11 @@ --- layout: layout.njk -title: </> kutty - kt-params +title: </> htmx - hx-params --- -## `kt-params` +## `hx-params` -The `kt-params` attribute allows you to filter the parameters that will be submitted with an AJAX request. +The `hx-params` attribute allows you to filter the parameters that will be submitted with an AJAX request. The possible values of this attribute are: @@ -15,7 +15,7 @@ The possible values of this attribute are: * `<param-list>` - Include all the comma separated list of parameter names ```html - <div kt-get="/example" kt-params="*">Get Some HTML, Including Params</div> + <div hx-get="/example" hx-params="*">Get Some HTML, Including Params</div> ``` This div will include all the parameters that a `POST` would, but they will be URL encoded @@ -23,4 +23,4 @@ and included in the URL, as per usual with a `GET`. ### Notes -* `kt-params` is inherited and can be placed on a parent element +* `hx-params` is inherited and can be placed on a parent element diff --git a/www/attributes/kt-patch.md b/www/attributes/hx-patch.md index 7f59ddc1..6ece3541 100644 --- a/www/attributes/kt-patch.md +++ b/www/attributes/hx-patch.md @@ -1,15 +1,15 @@ --- layout: layout.njk -title: </> kutty - kt-patch +title: </> htmx - hx-patch --- -## `kt-patch` +## `hx-patch` -The `kt-patch` attribute will cause an element to issue a `PATCH` to the specified URL and swap +The `hx-patch` attribute will cause an element to issue a `PATCH` to the specified URL and swap the HTML into the DOM using a swap strategy: ```html -<button kt-patch="/account" kt-target="body"> +<button hx-patch="/account" hx-target="body"> Patch Your Account </button> ``` @@ -19,9 +19,9 @@ This example will cause the `button` to issue a `PATCH` to `/account` and swap t ### Notes -* `kt-patch` is not inherited +* `hx-patch` is not inherited * Since most browsers do not support issuing an actual `PATCH`, the request will actually be issued as a `POST`, with the [`X-HTTP-Method-Override`](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields) header set to `PATCH`. -* You can control the target of the swap using the [kt-target](/attributes/kt-target) attribute -* You can control the swap strategy by using the [kt-swap](/attributes/kt-swap) attribute -* You can control what event triggers the request with the [kt-trigger](/attributes/kt-trigger) attribute +* You can control the target of the swap using the [hx-target](/attributes/hx-target) attribute +* You can control the swap strategy by using the [hx-swap](/attributes/hx-swap) attribute +* You can control what event triggers the request with the [hx-trigger](/attributes/hx-trigger) attribute diff --git a/www/attributes/hx-post.md b/www/attributes/hx-post.md new file mode 100644 index 00000000..992f13a2 --- /dev/null +++ b/www/attributes/hx-post.md @@ -0,0 +1,25 @@ +--- +layout: layout.njk +title: </> htmx - hx-post +--- + +## `hx-post` + +The `hx-post` attribute will cause an element to issue a `POST` to the specified URL and swap +the HTML into the DOM using a swap strategy: + +```html +<button hx-post="/account/enable" hx-target="body"> + Enable Your Account +</button> +``` + +This example will cause the `button` to issue a `POST` to `/account/enable` and swap the returned HTML into + the `innerHTML` of the `body`. + +### Notes + +* `hx-post` is not inherited +* You can control the target of the swap using the [hx-target](/attributes/hx-target) attribute +* You can control the swap strategy by using the [hx-swap](/attributes/hx-swap) attribute +* You can control what event triggers the request with the [hx-trigger](/attributes/hx-trigger) attribute diff --git a/www/attributes/hx-prompt.md b/www/attributes/hx-prompt.md new file mode 100644 index 00000000..ea2d1ff6 --- /dev/null +++ b/www/attributes/hx-prompt.md @@ -0,0 +1,21 @@ +--- +layout: layout.njk +title: </> htmx - hx-prompt +--- + +## `hx-prompt` + +The `hx-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-HX-Prompt` header. + +Here is an example: + +```html +<button hx-delete="/account" hx-prompt="Enter your account name to confirm deletion"> + Delete My Account +</button> +``` + +### Notes + +* `hx-prompt` is inherited and can be placed on a parent element diff --git a/www/attributes/hx-push-url.md b/www/attributes/hx-push-url.md new file mode 100644 index 00000000..674c1a62 --- /dev/null +++ b/www/attributes/hx-push-url.md @@ -0,0 +1,26 @@ +--- +layout: layout.njk +title: </> htmx - hx-push-url +--- + +## `hx-push-url` + +The `hx-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 hx-get="/account" hx-push-url="true"> + Go to My Account +</div> +``` + +This will cause htmx to snapshot the current DOM to `localStorage` and push the URL `/account' into the browser +location bar. + +### Notes + +* `hx-push-url` is inherited and can be placed on a parent element +* see also the `X-HX-Push` response header diff --git a/www/attributes/kt-put.md b/www/attributes/hx-put.md index 6aa310f4..301980e3 100644 --- a/www/attributes/kt-put.md +++ b/www/attributes/hx-put.md @@ -1,15 +1,15 @@ --- layout: layout.njk -title: </> kutty - kt-put +title: </> htmx - hx-put --- -## `kt-put` +## `hx-put` -The `kt-put` attribute will cause an element to issue a `PUT` to the specified URL and swap +The `hx-put` attribute will cause an element to issue a `PUT` to the specified URL and swap the HTML into the DOM using a swap strategy: ```html -<button kt-put="/account" kt-target="body"> +<button hx-put="/account" hx-target="body"> Put Money In Your Account </button> ``` @@ -19,9 +19,9 @@ This example will cause the `button` to issue a `PUT` to `/account` and swap the ### Notes -* `kt-put` is not inherited +* `hx-put` is not inherited * Since most browsers do not support issuing an actual `PUT`, the request will actually be issued as a `POST`, with the [`X-HTTP-Method-Override`](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields) header set to `PUT`. -* You can control the target of the swap using the [kt-target](/attributes/kt-target) attribute -* You can control the swap strategy by using the [kt-swap](/attributes/kt-swap) attribute -* You can control what event triggers the request with the [kt-trigger](/attributes/kt-trigger) attribute +* You can control the target of the swap using the [hx-target](/attributes/hx-target) attribute +* You can control the swap strategy by using the [hx-swap](/attributes/hx-swap) attribute +* You can control what event triggers the request with the [hx-trigger](/attributes/hx-trigger) attribute diff --git a/www/attributes/kt-select.md b/www/attributes/hx-select.md index 8a81143c..268efc5e 100644 --- a/www/attributes/kt-select.md +++ b/www/attributes/hx-select.md @@ -1,18 +1,18 @@ --- layout: layout.njk -title: </> kutty - kt-select +title: </> htmx - hx-select --- -## `kt-select` +## `hx-select` -The `kt-select` attribute allows you to select the content you want swapped from a response. The value of +The `hx-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"> + <button hx-get="/info" hx-select="#info-details" hx-swap="outerHTML"> Get Info! </button> </div> @@ -23,4 +23,4 @@ which will replace the entire button in the DOM. ### Notes -* `kt-select` is inherited and can be placed on a parent element +* `hx-select` is inherited and can be placed on a parent element diff --git a/www/attributes/kt-sse-src.md b/www/attributes/hx-sse-src.md index 661e90b6..3f2eec5d 100644 --- a/www/attributes/kt-sse-src.md +++ b/www/attributes/hx-sse-src.md @@ -1,16 +1,16 @@ --- layout: layout.njk -title: </> kutty - kt-sse-src +title: </> htmx - hx-sse-src --- -## `kt-sse-src` +## `hx-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) +The `hx-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 hx-sse-src="/event_stream"> + <div hx-get="/chatroom" hx-trigger="sse:chatter"> ... </div> </div> @@ -21,4 +21,4 @@ a `GET` to the `/chatroom` url whenever the `chatter` event is seen. ### Notes -* `kt-sse-src` is not inherited +* `hx-sse-src` is not inherited diff --git a/www/attributes/kt-swap-oob.md b/www/attributes/hx-swap-oob.md index c772a23d..f5c7e4bc 100644 --- a/www/attributes/kt-swap-oob.md +++ b/www/attributes/hx-swap-oob.md @@ -1,11 +1,11 @@ --- layout: layout.njk -title: </> kutty - kt-swap-oob +title: </> htmx - hx-swap-oob --- -## `kt-swap-oob` +## `hx-swap-oob` -The `kt-swap-oob` attribute allows you specify that some content in a response should be swapped into +The `hx-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. @@ -15,7 +15,7 @@ Consider the following response HTML: <div> ... </div> -<div id="alerts" kt-swap-oob="true"> +<div id="alerts" hx-swap-oob="true"> Saved! </div> @@ -26,5 +26,5 @@ as a replacement for the element with the id `alerts`, and will not end up in th ### Notes -* `kt-swap-oob` is not inherited -* `kt-swap-oob` is only supported on top level elements in the response, not children +* `hx-swap-oob` is not inherited +* `hx-swap-oob` is only supported on top level elements in the response, not children diff --git a/www/attributes/kt-swap.md b/www/attributes/hx-swap.md index 577742f2..42f46e5d 100644 --- a/www/attributes/kt-swap.md +++ b/www/attributes/hx-swap.md @@ -1,12 +1,12 @@ --- layout: layout.njk -title: </> kutty - kt-swap +title: </> htmx - hx-swap --- -## `kt-swap` +## `hx-swap` -The `kt-swap` attribute allows you to specify how the response will be swapped in relative to the -[target](/attributes/kt-target) of an AJAX request. +The `hx-swap` attribute allows you to specify how the response will be swapped in relative to the +[target](/attributes/hx-target) of an AJAX request. The possible values of this attribute are: @@ -24,17 +24,17 @@ specification. So in this code: ```html - <div kt-get="/example" kt-swap="afterend">Get Some HTML & Append It</div> + <div hx-get="/example" hx-swap="afterend">Get Some HTML & Append It</div> ``` The `div` will issue a request to `/example` and append the returned content after the `div` -You can modify the amount of time that kutty will wait after receiving a response to swap the content +You can modify the amount of time that htmx will wait after receiving a response to swap the content by including a `swap` modifier: ```html <!-- this will wait 1s before doing the swap after it is received --> - <div kt-get="/example" kt-swap="innerHTML swap:1s">Get Some HTML & Append It</div> + <div hx-get="/example" hx-swap="innerHTML swap:1s">Get Some HTML & Append It</div> ``` Similarly, you can modify the time between the swap and the settle logic by including a `settle` @@ -42,14 +42,14 @@ modifier: ```html <!-- this will wait 1s before doing the swap after it is received --> - <div kt-get="/example" kt-swap="innerHTML settle:1s">Get Some HTML & Append It</div> + <div hx-get="/example" hx-swap="innerHTML settle:1s">Get Some HTML & Append It</div> ``` -These attributes can be used to synchronize kutty with the timing of CSS transition effects. +These attributes can be used to synchronize htmx with the timing of CSS transition effects. ### Notes -* `kt-swap` is inherited and can be placed on a parent element +* `hx-swap` is inherited and can be placed on a parent element * The default value of this attribute is `innerHTML` * The default swap delay is 0ms * The default settle delay is 100ms diff --git a/www/attributes/kt-target.md b/www/attributes/hx-target.md index fcd83e5f..2fd409d3 100644 --- a/www/attributes/kt-target.md +++ b/www/attributes/hx-target.md @@ -1,11 +1,11 @@ --- layout: layout.njk -title: </> kutty - kt-target +title: </> htmx - hx-target --- -## `kt-target` +## `hx-target` -The `kt-target` attribute allows you to target a different element for swapping than the one issuing the AJAX +The `hx-target` attribute allows you to target a different element for swapping than the one issuing the AJAX request. The value of this attribute can be: * a CSS query selector of the element to target @@ -18,7 +18,7 @@ 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"> + <button hx-post="/register" hx-target="#response-div" hx-swap="beforeEnd"> Register! </button> </div> @@ -28,4 +28,4 @@ The response from the `/register` url will be appended to the `div` with the id ### Notes -* `kt-target` is inherited and can be placed on a parent element +* `hx-target` is inherited and can be placed on a parent element diff --git a/www/attributes/kt-trigger.md b/www/attributes/hx-trigger.md index 4ccb3093..35c0d63e 100644 --- a/www/attributes/kt-trigger.md +++ b/www/attributes/hx-trigger.md @@ -1,11 +1,11 @@ --- layout: layout.njk -title: </> kutty - kt-trigger +title: </> htmx - hx-trigger --- -## `kt-trigger` +## `hx-trigger` -The `kt-trigger` attribute allows you to specify what triggers an AJAX request. A trigger +The `hx-trigger` attribute allows you to specify what triggers an AJAX request. A trigger value can be one of the following: * An event name (e.g. "click") followed by a set of event modifiers @@ -17,7 +17,7 @@ value can be one of the following: A standard event, such as `click` can be specified as the trigger like so: ```html -<div kt-get="/clicked" kt-trigger="click">Click Me</div> +<div hx-get="/clicked" hx-trigger="click">Click Me</div> ``` Standard events can also have modifiers that change how they behave. The modifiers are: @@ -32,13 +32,13 @@ and the user hasn't typed anything new for 1 second: ```html <input name="q" - kt-get="/search" kt-trigger="keyup changed delay:1s" - kt-target="#search-results"/> + hx-get="/search" hx-trigger="keyup changed delay:1s" + hx-target="#search-results"/> ``` The response from the `/register` url will be appended to the `div` with the id `response-div`. -There are two special events that are non-standard that kutty supports: +There are two special events that are non-standard that htmx supports: * `load` - triggered on load (useful for lazy-loading something) * `reveal` - triggered when an element is scrolled into the viewport (also useful for lazy-loading) @@ -48,7 +48,7 @@ There are two special events that are non-standard that kutty supports: By using the syntax `every <timing declaration>` you can have an element poll periodically: ```html -<div kt-get="/latest_updates" kt-trigger="every 1s"> +<div hx-get="/latest_updates" hx-trigger="every 1s"> Nothing Yet! </div> ``` @@ -64,8 +64,8 @@ an element can register to be triggered by a specific SSE event using the syntax Here is an example: ```html - <div kt-sse-src="/event_stream"> - <div kt-get="/chatroom" kt-trigger="sse:chatter"> + <div hx-sse-src="/event_stream"> + <div hx-get="/chatroom" hx-trigger="sse:chatter"> ... </div> </div> @@ -76,4 +76,4 @@ a `GET` to the `/chatroom` url whenever the `chatter` event is seen. ### Notes -* `kt-trigger` is not inherited
\ No newline at end of file +* `hx-trigger` is not inherited
\ No newline at end of file diff --git a/www/attributes/kt-error-url.md b/www/attributes/kt-error-url.md deleted file mode 100644 index 58f8f7d1..00000000 --- a/www/attributes/kt-error-url.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -layout: layout.njk -title: </> kutty - kt-error-url ---- - -## `kt-error-url` - -The `kt-error-url` attribute allows you to send client-side errors to a specified URL. It is typically put on the -body tag, so all errors are caught and send to the server. - -```html -<body kt-error-url="/errors">\ - -</body> -``` -When a client side error is caught by kutty it will be `POST`-ed to the given URL, with the following JSON format: - -```json - { "elt": elt.id, "event": eventName, "detail" : detail } -``` - -### Notes - -* `kt-error-url` is inherited and can be placed on a parent element diff --git a/www/attributes/kt-get.md b/www/attributes/kt-get.md deleted file mode 100644 index e2f5c65c..00000000 --- a/www/attributes/kt-get.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -layout: layout.njk -title: </> kutty - kt-get ---- - -## `kt-get` - -The `kt-get` attribute will cause an element to issue a `GET` to the specified URL and swap -the HTML into the DOM using a swap strategy: - -```html - <div kt-get="/example">Get Some HTML</div> -``` - -This example will cause the `div` to issue a `GET` to `/example` and swap the returned HTML into - the `innerHTML` of the `div`. - -### Notes - -* `kt-get` is not inherited -* By default `kt-get` does not include any parameters. You can use the [kt-params](/attributes/kt-params) - attribute to change this -* You can control the target of the swap using the [kt-target](/attributes/kt-target) attribute -* You can control the swap strategy by using the [kt-swap](/attributes/kt-swap) attribute -* You can control what event triggers the request with the [kt-trigger](/attributes/kt-trigger) attribute diff --git a/www/attributes/kt-post.md b/www/attributes/kt-post.md deleted file mode 100644 index 6a4d06ef..00000000 --- a/www/attributes/kt-post.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -layout: layout.njk -title: </> kutty - kt-post ---- - -## `kt-post` - -The `kt-post` attribute will cause an element to issue a `POST` to the specified URL and swap -the HTML into the DOM using a swap strategy: - -```html -<button kt-post="/account/enable" kt-target="body"> - Enable Your Account -</button> -``` - -This example will cause the `button` to issue a `POST` to `/account/enable` and swap the returned HTML into - the `innerHTML` of the `body`. - -### Notes - -* `kt-post` is not inherited -* You can control the target of the swap using the [kt-target](/attributes/kt-target) attribute -* You can control the swap strategy by using the [kt-swap](/attributes/kt-swap) attribute -* You can control what event triggers the request with the [kt-trigger](/attributes/kt-trigger) attribute diff --git a/www/attributes/kt-prompt.md b/www/attributes/kt-prompt.md deleted file mode 100644 index cce04cfd..00000000 --- a/www/attributes/kt-prompt.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -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 diff --git a/www/attributes/kt-push-url.md b/www/attributes/kt-push-url.md deleted file mode 100644 index 03d3a047..00000000 --- a/www/attributes/kt-push-url.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -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 |