mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-03 15:55:39 +00:00
Fixed code sample indentation
This commit is contained in:
parent
218976c5ba
commit
9083ad86d1
35
www/docs.md
35
www/docs.md
@ -68,7 +68,8 @@ With that in mind, consider the following bit of HTML:
|
||||
<button hx-post="/clicked"
|
||||
hx-trigger="click"
|
||||
hx-target="#parent-div"
|
||||
hx-swap="outerHTML">
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
Click Me!
|
||||
</button>
|
||||
```
|
||||
@ -235,7 +236,8 @@ You can use these attributes to implement many common UX patterns, such as [Acti
|
||||
hx-get="/trigger_delay"
|
||||
hx-trigger="keyup changed delay:500ms"
|
||||
hx-target="#search-results"
|
||||
placeholder="Search..."/>
|
||||
placeholder="Search..."
|
||||
>
|
||||
<div id="search-results"></div>
|
||||
```
|
||||
|
||||
@ -294,8 +296,8 @@ a `load` trigger along with a delay, and replaces itself with the response:
|
||||
```html
|
||||
<div hx-get="/messages"
|
||||
hx-trigger="load delay:1s"
|
||||
hx-swap="outerHTML">
|
||||
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -320,7 +322,7 @@ on it to transition to an opacity of 1, showing the indicator.
|
||||
```html
|
||||
<button hx-get="/click">
|
||||
Click Me!
|
||||
<img class="htmx-indicator" src="/spinner.gif"/>
|
||||
<img class="htmx-indicator" src="/spinner.gif">
|
||||
</button>
|
||||
```
|
||||
|
||||
@ -367,7 +369,8 @@ use the [hx-target](/attributes/hx-target) attribute, which takes a CSS selecto
|
||||
hx-get="/trigger_delay"
|
||||
hx-trigger="keyup delay:500ms changed"
|
||||
hx-target="#search-results"
|
||||
placeholder="Search..."/>
|
||||
placeholder="Search..."
|
||||
>
|
||||
<div id="search-results"></div>
|
||||
```
|
||||
|
||||
@ -403,7 +406,8 @@ Consider a race condition between a form submission and an individual input's va
|
||||
<form hx-post="/store">
|
||||
<input id="title" name="title" type="text"
|
||||
hx-post="/validate"
|
||||
hx-trigger="change">
|
||||
hx-trigger="change"
|
||||
>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
```
|
||||
@ -419,7 +423,8 @@ a form request is present or starts while the input request is in flight:
|
||||
<input id="title" name="title" type="text"
|
||||
hx-post="/validate"
|
||||
hx-trigger="change"
|
||||
hx-sync="closest form:abort">
|
||||
hx-sync="closest form:abort"
|
||||
>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
```
|
||||
@ -647,7 +652,8 @@ However, you could wrap the htmx-enhanced input in a form element:
|
||||
hx-post="/search"
|
||||
hx-trigger="keyup changed delay:500ms, search"
|
||||
hx-target="#search-results"
|
||||
hx-indicator=".htmx-indicator">
|
||||
hx-indicator=".htmx-indicator"
|
||||
>
|
||||
</form>
|
||||
```
|
||||
|
||||
@ -709,15 +715,13 @@ If you wish to establish a `WebSocket` connection in htmx, you use the [hx-ws](/
|
||||
</div>
|
||||
```
|
||||
|
||||
The `connect` declaration established the connection, and the `send` declaration tells the form to submit values to the
|
||||
socket on `submit`.
|
||||
The `connect` declaration established the connection, and the `send` declaration tells the form to submit values to the socket on `submit`.
|
||||
|
||||
More details can be found on the [hx-ws attribute page](/attributes/hx-ws)
|
||||
|
||||
### <a name="sse"></a> [Server Sent Events](#sse)
|
||||
|
||||
[Server Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) are
|
||||
a way for servers to send events to browsers. It provides a higher-level mechanism for communication between the
|
||||
[Server Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) are a way for servers to send events to browsers. It provides a higher-level mechanism for communication between the
|
||||
server and the browser than websockets.
|
||||
|
||||
If you want an element to respond to a Server Sent Event via htmx, you need to do two things:
|
||||
@ -872,7 +876,8 @@ Here is an example of an input that uses the `htmx:validation:validate` event to
|
||||
call me.setCustomValidity('Please enter the value foo')
|
||||
else
|
||||
call me.setCustomValidity('')"
|
||||
name="example">
|
||||
name="example"
|
||||
>
|
||||
</form>
|
||||
```
|
||||
|
||||
@ -1240,7 +1245,7 @@ is initialized with the `htmx.process()` function.
|
||||
For example, if you were to fetch some data and put it into a div using the `fetch` API, and that HTML had
|
||||
htmx attributes in it, you would need to add a call to `htmx.process()` like this:
|
||||
|
||||
```ecmascript 6
|
||||
```js
|
||||
let myDiv = document.getElementById('my-div')
|
||||
fetch('http://example.com/movies.json')
|
||||
.then(response => response.text())
|
||||
|
Loading…
x
Reference in New Issue
Block a user