Fixed code sample indentation

This commit is contained in:
Ben Croker 2022-05-01 13:20:40 +02:00 committed by GitHub
parent 218976c5ba
commit 9083ad86d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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())