itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-05 00:35:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed code sample indentation

Browse Source
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
1 changed files with 158 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
www/docs.md
View File

@ -68,7 +68,8 @@ With that in mind, consider the following bit of HTML:
<button hx-post="/clicked" <button hx-post="/clicked"
hx-trigger="click" hx-trigger="click"
hx-target="#parent-div" hx-target="#parent-div"
hx-swap="outerHTML"> hx-swap="outerHTML"
>
Click Me! Click Me!
</button> </button>
``` ```
@ -235,7 +236,8 @@ You can use these attributes to implement many common UX patterns, such as [Acti
hx-get="/trigger_delay" hx-get="/trigger_delay"
hx-trigger="keyup changed delay:500ms" hx-trigger="keyup changed delay:500ms"
hx-target="#search-results" hx-target="#search-results"
placeholder="Search..."/> placeholder="Search..."
>
<div id="search-results"></div> <div id="search-results"></div>
``` ```
@ -294,8 +296,8 @@ a `load` trigger along with a delay, and replaces itself with the response:
```html ```html
<div hx-get="/messages" <div hx-get="/messages"
hx-trigger="load delay:1s" hx-trigger="load delay:1s"
hx-swap="outerHTML"> hx-swap="outerHTML"
>
</div> </div>
``` ```
@ -320,7 +322,7 @@ on it to transition to an opacity of 1, showing the indicator.
```html ```html
<button hx-get="/click"> <button hx-get="/click">
Click Me! Click Me!
<img class="htmx-indicator" src="/spinner.gif"/> <img class="htmx-indicator" src="/spinner.gif">
</button> </button>
``` ```
@ -367,7 +369,8 @@ use the [hx-target](/attributes/hx-target) attribute, which takes a CSS selecto
hx-get="/trigger_delay" hx-get="/trigger_delay"
hx-trigger="keyup delay:500ms changed" hx-trigger="keyup delay:500ms changed"
hx-target="#search-results" hx-target="#search-results"
placeholder="Search..."/> placeholder="Search..."
>
<div id="search-results"></div> <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"> <form hx-post="/store">
<input id="title" name="title" type="text" <input id="title" name="title" type="text"
hx-post="/validate" hx-post="/validate"
hx-trigger="change"> hx-trigger="change"
>
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </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" <input id="title" name="title" type="text"
hx-post="/validate" hx-post="/validate"
hx-trigger="change" hx-trigger="change"
hx-sync="closest form:abort"> hx-sync="closest form:abort"
>
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </form>
``` ```
@ -647,7 +652,8 @@ However, you could wrap the htmx-enhanced input in a form element:
hx-post="/search" hx-post="/search"
hx-trigger="keyup changed delay:500ms, search" hx-trigger="keyup changed delay:500ms, search"
hx-target="#search-results" hx-target="#search-results"
hx-indicator=".htmx-indicator"> hx-indicator=".htmx-indicator"
>
</form> </form>
``` ```
@ -709,15 +715,13 @@ If you wish to establish a `WebSocket` connection in htmx, you use the [hx-ws](/
</div> </div>
``` ```
The `connect` declaration established the connection, and the `send` declaration tells the form to submit values to the The `connect` declaration established the connection, and the `send` declaration tells the form to submit values to the socket on `submit`.
socket on `submit`.
More details can be found on the [hx-ws attribute page](/attributes/hx-ws) More details can be found on the [hx-ws attribute page](/attributes/hx-ws)
### <a name="sse"></a> [Server Sent Events](#sse) ### <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 [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
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. 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: 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') call me.setCustomValidity('Please enter the value foo')
else else
call me.setCustomValidity('')" call me.setCustomValidity('')"
name="example"> name="example"
>
</form> </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 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: 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') let myDiv = document.getElementById('my-div')
fetch('http://example.com/movies.json') fetch('http://example.com/movies.json')
.then(response => response.text()) .then(response => response.text())