itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-11-04 07:24:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
Carson Gross 2022-07-21 12:31:31 -06:00
commit 8e9611909c
6 changed files with 78 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
www/attributes/hx-replace-url.md
View File

@ -10,7 +10,7 @@ The `hx-replace-url` attribute allows you to replace the current url of the brow
The possible values of this attribute are:
1. `true`, which replaces the fetched URL in the browser navigation bar.
2. `false`, which disables replacing the fetched URL if it would otherwise be replaced due to inheritance
2. `false`, which disables replacing the fetched URL if it would otherwise be replaced due to inheritance.
3. A URL to be replaced into the location bar.
This may be relative or absolute, as per [`history.replaceState()`](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState).
@ -27,7 +27,7 @@ This will cause htmx to snapshot the current DOM to `localStorage` and replace t
Another example:
```html
<div hx-get="/account" hx-push-url="/account/home">
<div hx-get="/account" hx-replace-url="/account/home">
Go to My Account
</div>
```
@ -37,7 +37,7 @@ This will replace the URL `/account/home' in the browser location bar.
### Notes
* `hx-replace-url` is inherited and can be placed on a parent element
* The [`HX-Replace` response header](/headers/hx-replace) has similar behavior and can override this attribute.
* The [`HX-Replace-Url` response header](/headers/hx-replace-url) has similar behavior and can override this attribute.
* The [`hx-history-elt` attribute](/attributes/hx-history-elt) allows changing which element is saved in the history cache.
* The [`hx-push-url` attribute](/attributes/hx-push-url) is a similar and more commonly used attribute, which creates a
new history entry rather than replacing the current one.

7
www/css/site.scss
View File

@ -59,6 +59,12 @@ body .content code {
font-size: 0.9em;
}
code:not(code[class*="language-"]) {
background: #3465a424;
border-radius: 2px;
padding: 2px 5px;
}
.dark-hero {
background: url(/img/topo.svg), linear-gradient(#1f1f1f, #2d2d2d) ;
height: 240px;
@ -399,6 +405,7 @@ h1,h2,h3,h4{
table td:first-child code {
display: block;
background: none;
}

18
www/headers/hx-replace-url.md Normal file
View File

@ -0,0 +1,18 @@
---
layout: layout.njk
title: </> htmx - HX-Replace-Url Response Headers
---
## `HX-Replace-Url` Response Header
The `HX-Replace-Url` header allows you to replace the current URL in the browser [location history](https://developer.mozilla.org/en-US/docs/Web/API/History_API).
This does not create a new history entry; in effect, it removes the previous current URL from the browser&rsquo;s history.
This is similar to the [`hx-replace-url` attribute](/attributes/hx-replace-url).
If present, this header overrides any behavior defined with attributes.
The possible values for this header are:
1. A URL to replace the current URL in the location bar.
This may be relative or absolute, as per [`history.replaceState()`](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState), but must have the same origin as the current URL.
2. `false`, which prevents the browser’s current URL from being updated.

2
www/migration-guide-hotwire-turbo.md
View File

@ -26,7 +26,7 @@ addEventListener("htmx:afterOnLoad", (event) => {
event.target.querySelectorAll("button").forEach(node => { node.disabled = false })
})
```
* Or, [hyperscript](https://hyperscript.org) may be used: `_="on submit toggle @disabled <button/> in me until htmx:afterOnLoad"` See: [Cookbook](/cookbook)
* Or, [hyperscript](https://hyperscript.org) may be used: `_="on submit toggle @disabled <button/> in me until htmx:afterOnLoad"` See: [Cookbook](https://hyperscript.org/cookbook/)

79
www/reference.md
View File

@ -6,53 +6,68 @@ title: </> htmx - Attributes
## Contents
* [Htmx Attribute Reference](#attributes)
* [Htmx CSS Class Reference](#classes)
* [Htmx Request Headers Reference](#request_headers)
* [Htmx Response Headers Reference](#response_headers)
* [Htmx Event Reference](#events)
* [Htmx Extensions Reference](/extensions#reference)
* [JS API Reference](#api)
* [Htmx Attributes](#attributes)
* [Htmx Additional Attributes](#attributes-additional)
* [Htmx CSS Classes](#classes)
* [Htmx Request Headers](#request_headers)
* [Htmx Response Headers](#response_headers)
* [Htmx Events](#events)
* [Htmx Extensions](/extensions#reference)
* [Javascript API](#api)
## <a name="attributes"></a> [Attribute Reference](#attributes)
The most significant attributes to use htmx.
<div class="info-table">
| Attribute | Description |
|------------------------------------------------|-------------|
| [`hx-boost`](/attributes/hx-boost) | progressively enhances anchors and forms to use AJAX requests
| [`hx-confirm`](/attributes/hx-confirm) | shows a confim() dialog before issuing a request
| [`hx-boost`](/attributes/hx-boost) | add or remove [progressive enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement) for links and forms
| [`hx-get`](/attributes/hx-get) | issues a `GET` to the specified URL
| [`hx-post`](/attributes/hx-post) | issues a `POST` to the specified URL
| [`hx-push-url`](/attributes/hx-push-url) | pushes the URL into the browser location bar, creating a new history entry
| [`hx-select`](/attributes/hx-select) | select content to swap in from a response
| [`hx-select-oob`](/attributes/hx-select-oob) | select content to swap in from a response, out of band (somewhere other than the target)
| [`hx-swap`](/attributes/hx-swap) | controls how content is swapped in (`outerHTML`, `beforeEnd`, `afterend`, ...)
| [`hx-swap-oob`](/attributes/hx-swap-oob) | marks content in a response to be out of band (should swap in somewhere other than the target)
| [`hx-target`](/attributes/hx-target) | specifies the target element to be swapped
| [`hx-trigger`](/attributes/hx-trigger) | specifies the event that triggers the request
| [`hx-vals`](/attributes/hx-vals) | adds values to the parameters to submit with the request (JSON-formatted)
</div>
## <a name="attributes-additional"></a> [Additional Attribute Reference](#attributes-additional)
All other attributes available.
<div class="info-table">
| Attribute | Description |
|------------------------------------------------|-------------|
| [`hx-confirm`](/attributes/hx-confirm) | shows a `confim()` dialog before issuing a request
| [`hx-delete`](/attributes/hx-delete) | issues a `DELETE` to the specified URL
| [`hx-disable`](/attributes/hx-disable) | disables htmx processing for the given node and any children nodes
| [`hx-disinherit`](/attributes/hx-disinherit) | control and disable automatic attribute inheritance for child nodes
| [`hx-encoding`](/attributes/hx-encoding) | changes the request encoding type
| [`hx-ext`](/attributes/hx-ext) | extensions to use for this element
| [`hx-get`](/attributes/hx-get) | issues a `GET` to the specified URL
| [`hx-headers`](/attributes/hx-headers) | adds to the headers that will be submitted with the request
| [`hx-history-elt`](/attributes/hx-history-elt) | the element to snapshot and restore during history navigation
| [`hx-include`](/attributes/hx-include) | includes additional data in AJAX requests
| [`hx-indicator`](/attributes/hx-indicator) | the element to put the `htmx-request` class on during the AJAX request
| [`hx-include`](/attributes/hx-include) | include additional data in requests
| [`hx-indicator`](/attributes/hx-indicator) | the element to put the `htmx-request` class on during the request
| [`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-preserve`](/attributes/hx-preserve) | specifies elements to keep unchanged between requests
| [`hx-prompt`](/attributes/hx-prompt) | shows a `prompt()` before submitting a request
| [`hx-put`](/attributes/hx-put) | issues a `PUT` to the specified URL
| [`hx-replace-url`](/attributes/hx-replace-url) | replace the URL in the location bar
| [`hx-replace-url`](/attributes/hx-replace-url) | replace the URL in the browser location bar
| [`hx-request`](/attributes/hx-request) | configures various aspects of the request
| [`hx-select`](/attributes/hx-select) | selects a subset of the server response to process
| [`hx-select-oob`](/attributes/hx-select-oob) | selects one or more elements from a server response to swap in via an out of band swap
| [`hx-sse`](/extensions/server-sent-events) | has been moved to an extension. [Documentation for older versions](/attributes/hx-sse)
| [`hx-swap`](/attributes/hx-swap) | controls how the response content is swapped into the DOM (e.g. 'outerHTML' or 'beforeEnd')
| [`hx-swap-oob`](/attributes/hx-swap-oob) | marks content in a response as being "Out of Band", i.e. swapped somewhere other than the target
| [`hx-sync`](/attributes/hx-sync) | controls requests made by different elements are synchronized with one another
| [`hx-target`](/attributes/hx-target) | specifies the target element to be swapped
| [`hx-trigger`](/attributes/hx-trigger) | specifies the event that triggers the request
| [`hx-vals`](/attributes/hx-vals) | adds JSON-formatted values to the parameters that will be submitted with the request
| [`hx-vars`](/attributes/hx-vars) | adds calculated values to the parameters that will be submitted with the request (deprecated)
| [`hx-sync`](/attributes/hx-sync) | control how requests made be different elements are synchronized
| [`hx-vars`](/attributes/hx-vars) | adds values dynamically to the parameters to submit with the request (deprecated, please use `hx-vals`)
| [`hx-ws`](/extensions/web-sockets) | has been moved to an extension. [Documentation for older versions](/attributes/hx-ws)
</div>
## <a name="classes"></a> [CSS Class Reference](#classes)
@ -61,9 +76,9 @@ title: </> htmx - Attributes
| Class | Description |
|-----------|-------------|
| `htmx-added` | Applied to a new piece of content before it is swapped, removed after it is settled.
| `htmx-indicator` | A dynamically generated class that will toggle visible (opacity:1) when a `htmx-request` class is present
| `htmx-request` | Applied to either the element or the element specified with [`hx-indicator`](/attributes/hx-indicator) while a request is ongoing
| `htmx-added` | Applied to a new piece of content before it is swapped, removed after it is settled.
| `htmx-settling` | Applied to a target after content is swapped, removed after it is settled. The duration can be modified via [`hx-swap`](/attributes/hx-swap).
| `htmx-swapping` | Applied to a target before any content is swapped, removed after it is swapped. The duration can be modified via [`hx-swap`](/attributes/hx-swap).
@ -94,13 +109,13 @@ title: </> htmx - Attributes
| Header | Description |
|--------------------------------------------------|-------------|
| [`HX-Push-Url`](/headers/hx-push-url) | pushes a new url into the history stack
| [`HX-Replace-Url`](/headers/hx-replace-url) | replaces the current URL in the location bar
| `HX-Redirect` | can be used to do a client-side redirect to a new location
| [`HX-Location`](/headers/hx-location) | Allows you to do a client-side redirect that does not do a full page reload
| [`HX-Push-Url`](/headers/hx-push-url) | pushes a new url into the history stack
| `HX-Redirect` | can be used to do a client-side redirect to a new location
| `HX-Refresh` | if set to "true" the client side will do a a full refresh of the page
| `HX-Retarget` | A CSS selector that updates the target of the content update to a different element on the page
| [`HX-Replace-Url`](/headers/hx-replace-url) | replaces the current URL in the location bar
| `HX-Reswap` | Allows you to specify how the response will be swapped. See [hx-swap](/attributes/hx-swap) for possible values
| `HX-Retarget` | A CSS selector that updates the target of the content update to a different element on the page
| [`HX-Trigger`](/headers/hx-trigger) | allows you to trigger client side events, see the [documentation](/headers/hx-trigger) for more info
| [`HX-Trigger-After-Settle`](/headers/hx-trigger) | allows you to trigger client side events, see the [documentation](/headers/hx-trigger) for more info
| [`HX-Trigger-After-Swap`](/headers/hx-trigger) | allows you to trigger client side events, see the [documentation](/headers/hx-trigger) for more info
@ -155,7 +170,7 @@ title: </> htmx - Attributes
</div>
## <a name="api"></a> [JS API Reference](#api)
## <a name="api"></a> [Javascript API Reference](#api)
<div class="info-table">

3
www/server-examples.md
View File

@ -10,7 +10,7 @@ most server-side frameworks are already pretty well set up to integrate with htm
rendering HTML long before JSON became popular.
Different frameworks and platforms may offer alternative systems for installing htmx - for example, in the Java / JVM
ecosystem, [WebJars](https://www.webjars.org) allows the use of npm packages with popular Java build tools such as
ecosystem, [WebJars](https://www.webjars.org) allows the use of npm packages with popular Java build tools such as
Maven and Gradle.
These examples may make it a bit easier to get started using htmx with your platform of choice.
@ -67,6 +67,7 @@ These examples may make it a bit easier to get started using htmx with your plat
- <https://github.com/bpamiri/cfwheels-todomvc-htmx>
- <https://www.forgebox.io/view/cfwheels-htmx-plugin>
- <https://github.com/chapmandu/cfwheels-htmx-crud>
## C#