itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-27 03:25:00 +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

311
www/docs.md
View File

@ -53,8 +53,8 @@ javascript.
To understand htmx, first lets take a look at an anchor tag: To understand htmx, first lets take a look at an anchor tag:
``` html ```html
<a href="/blog">Blog</a> <a href="/blog">Blog</a>
``` ```
This anchor tag tells a browser: This anchor tag tells a browser:
@ -64,13 +64,14 @@ This anchor tag tells a browser:
With that in mind, consider the following bit of HTML: With that in mind, consider the following bit of HTML:
``` html ```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>
``` ```
This tells htmx: This tells htmx:
@ -93,8 +94,8 @@ without even needing to really understand that concept.
It's worth mentioning that, if you prefer, you can use the `data-` prefix when using htmx: It's worth mentioning that, if you prefer, you can use the `data-` prefix when using htmx:
``` html ```html
<a data-hx-post="/click">Click Me!</a> <a data-hx-post="/click">Click Me!</a>
``` ```
## <a name="installing"></a> [Installing](#installing) ## <a name="installing"></a> [Installing](#installing)
@ -111,7 +112,7 @@ The simplest, recommended way to install htmx is to copy it into your project.
Download `htmx.min.js` [from unpkg.com](https://unpkg.com/browse/htmx.org/dist/) and add it to the appropriate directory in your project. Download `htmx.min.js` [from unpkg.com](https://unpkg.com/browse/htmx.org/dist/) and add it to the appropriate directory in your project.
Then, include it where necessary with a `<script>` tag: Then, include it where necessary with a `<script>` tag:
``` html ```html
<script src="/path/to/htmx.min.js" defer></script> <script src="/path/to/htmx.min.js" defer></script>
``` ```
@ -121,7 +122,7 @@ You can also add extensions this way, by downloading them from the `ext/` direct
For more advanced configuration, you can install htmx with [npm](https://www.npmjs.com/): For more advanced configuration, you can install htmx with [npm](https://www.npmjs.com/):
``` sh ```sh
npm install htmx.org npm install htmx.org
``` ```
@ -135,7 +136,7 @@ Avoid using unpkg.com or other JavaScript CDN’s in production, for [many good
To use htmx from unpkg.com, use this `<script>` tag: To use htmx from unpkg.com, use this `<script>` tag:
``` html ```html
<script src="https://unpkg.com/htmx.org@1.7.0" integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo" crossorigin="anonymous" defer></script> <script src="https://unpkg.com/htmx.org@1.7.0" integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo" crossorigin="anonymous" defer></script>
``` ```
@ -145,21 +146,21 @@ If you are using webpack to manage your javascript:
* Install `htmx` via your favourite package manager (like npm or yarn) * Install `htmx` via your favourite package manager (like npm or yarn)
* Add the import to your `index.js` * Add the import to your `index.js`
``` js ```js
import 'htmx.org'; import 'htmx.org';
``` ```
If you want to use the global `htmx` variable (recommended), you need to inject it to the window scope: If you want to use the global `htmx` variable (recommended), you need to inject it to the window scope:
* Create a custom JS file * Create a custom JS file
* Import this file to your `index.js` (below the import from step 2) * Import this file to your `index.js` (below the import from step 2)
``` js ```js
import 'path/to/my_custom.js'; import 'path/to/my_custom.js';
``` ```
* Then add this code to the file: * Then add this code to the file:
``` js ```js
window.htmx = require('htmx.org'); window.htmx = require('htmx.org');
``` ```
* Finally, rebuild your bundle * Finally, rebuild your bundle
## <a name="ajax"></a> [AJAX](#ajax) ## <a name="ajax"></a> [AJAX](#ajax)
@ -179,9 +180,9 @@ Each of these attributes takes a URL to issue an AJAX request to. The element w
type to the given URL when the element is [triggered](#triggers): type to the given URL when the element is [triggered](#triggers):
```html ```html
<div hx-put="/messages"> <div hx-put="/messages">
Put To Messages Put To Messages
</div> </div>
``` ```
This tells the browser: This tells the browser:
@ -202,9 +203,9 @@ attribute to specify which event will cause the request.
Here is a `div` that posts to `/mouse_entered` when a mouse enters it: Here is a `div` that posts to `/mouse_entered` when a mouse enters it:
```html ```html
<div hx-post="/mouse_entered" hx-trigger="mouseenter"> <div hx-post="/mouse_entered" hx-trigger="mouseenter">
[Here Mouse, Mouse!] [Here Mouse, Mouse!]
</div> </div>
``` ```
#### <a name="trigger-modifiers"></a> [Trigger Modifiers](#trigger-modifiers) #### <a name="trigger-modifiers"></a> [Trigger Modifiers](#trigger-modifiers)
@ -213,9 +214,9 @@ A trigger can also have a few additional modifiers that change its behavior. Fo
happen once, you can use the `once` modifier for the trigger: happen once, you can use the `once` modifier for the trigger:
```html ```html
<div hx-post="/mouse_entered" hx-trigger="mouseenter once"> <div hx-post="/mouse_entered" hx-trigger="mouseenter once">
[Here Mouse, Mouse!] [Here Mouse, Mouse!]
</div> </div>
``` ```
Other modifiers you can use for triggers are: Other modifiers you can use for triggers are:
@ -231,12 +232,13 @@ so the request will trigger at the end of the time period.
You can use these attributes to implement many common UX patterns, such as [Active Search](/examples/active-search): You can use these attributes to implement many common UX patterns, such as [Active Search](/examples/active-search):
```html ```html
<input type="text" name="q" <input type="text" name="q"
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>
``` ```
This input will issue a request 500 milliseconds after a key up event if the input has been changed and inserts the results This input will issue a request 500 milliseconds after a key up event if the input has been changed and inserts the results
@ -275,8 +277,8 @@ If you want an element to poll the given URL rather than wait for an event, you
with the [`hx-trigger`](/attributes/hx-trigger/) attribute: with the [`hx-trigger`](/attributes/hx-trigger/) attribute:
```html ```html
<div hx-get="/news" hx-trigger="every 2s"> <div hx-get="/news" hx-trigger="every 2s">
</div> </div>
``` ```
This tells htmx This tells htmx
@ -293,9 +295,9 @@ 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>
``` ```
@ -318,10 +320,10 @@ another element, if specified). The `htmx-request` class will cause a child ele
on it to transition to an opacity of 1, showing the indicator. 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>
``` ```
Here we have a button. When it is clicked the `htmx-request` class will be added to it, which will reveal the spinner Here we have a button. When it is clicked the `htmx-request` class will be added to it, which will reveal the spinner
@ -331,27 +333,27 @@ While the `htmx-indicator` class uses opacity to hide and show the progress indi
you can create your own CSS transition like so: you can create your own CSS transition like so:
```css ```css
.htmx-indicator{ .htmx-indicator{
display:none; display:none;
} }
.htmx-request .my-indicator{ .htmx-request .my-indicator{
display:inline; display:inline;
} }
.htmx-request.my-indicator{ .htmx-request.my-indicator{
display:inline; display:inline;
} }
``` ```
If you want the `htmx-request` class added to a different element, you can use the [hx-indicator](/attributes/hx-indicator) If you want the `htmx-request` class added to a different element, you can use the [hx-indicator](/attributes/hx-indicator)
attribute with a CSS selector to do so: attribute with a CSS selector to do so:
```html ```html
<div> <div>
<button hx-get="/click" hx-indicator="#indicator"> <button hx-get="/click" hx-indicator="#indicator">
Click Me! Click Me!
</button> </button>
<img id="indicator" class="htmx-indicator" src="/spinner.gif"/> <img id="indicator" class="htmx-indicator" src="/spinner.gif"/>
</div> </div>
``` ```
Here we call out the indicator explicitly by id. Note that we could have placed the class on the parent `div` as well Here we call out the indicator explicitly by id. Note that we could have placed the class on the parent `div` as well
@ -363,12 +365,13 @@ If you want the response to be loaded into a different element other than the on
use the [hx-target](/attributes/hx-target) attribute, which takes a CSS selector. Looking back at our Live Search example: use the [hx-target](/attributes/hx-target) attribute, which takes a CSS selector. Looking back at our Live Search example:
```html ```html
<input type="text" name="q" <input type="text" name="q"
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>
``` ```
You can see that the results from the search are going to be loaded into `div#search-results`, rather than into the You can see that the results from the search are going to be loaded into `div#search-results`, rather than into the
@ -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>
``` ```
@ -442,13 +447,13 @@ htmx makes it easy to use [CSS Transitions](https://developer.mozilla.org/en-US/
javascript. Consider this HTML content: javascript. Consider this HTML content:
```html ```html
<div id="div1">Original Content</div> <div id="div1">Original Content</div>
``` ```
Imagine this content is replaced by htmx via an ajax request with this new content: Imagine this content is replaced by htmx via an ajax request with this new content:
```html ```html
<div id="div1" class="red">New Content</div> <div id="div1" class="red">New Content</div>
``` ```
Note two things: Note two things:
@ -460,8 +465,8 @@ Given this situation, we can write a CSS transition from the old state to the ne
```css ```css
.red { .red {
color: red; color: red;
transition: all ease-in 1s ; transition: all ease-in 1s ;
} }
``` ```
@ -490,8 +495,8 @@ If you want to swap content from a response directly into the DOM by using the `
[hx-swap-oob](/attributes/hx-swap-oob) attribute in the *response* html: [hx-swap-oob](/attributes/hx-swap-oob) attribute in the *response* html:
```html ```html
<div id="message" hx-swap-oob="true">Swap me directly!</div> <div id="message" hx-swap-oob="true">Swap me directly!</div>
Additional Content Additional Content
``` ```
In this response, `div#message` would be swapped directly into the matching DOM element, while the additional content In this response, `div#message` would be swapped directly into the matching DOM element, while the additional content
@ -552,7 +557,7 @@ attribute, which allows you to confirm an action using a simple javascript dialo
```html ```html
<button hx-delete="/account" hx-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 Delete My Account
</button> </button>
``` ```
@ -566,10 +571,10 @@ allows you to "hoist" attributes up the DOM to avoid code duplication. Consider
```html ```html
<button hx-delete="/account" hx-confirm="Are you sure?"> <button hx-delete="/account" hx-confirm="Are you sure?">
Delete My Account Delete My Account
</button> </button>
<button hx-put="/account" hx-confirm="Are you sure?"> <button hx-put="/account" hx-confirm="Are you sure?">
Update My Account Update My Account
</button> </button>
``` ```
@ -578,10 +583,10 @@ Here we have a duplicate `hx-confirm` attribute. We can hoist this attribute to
```html ```html
<div hx-confirm="Are you sure?"> <div hx-confirm="Are you sure?">
<button hx-delete="/account"> <button hx-delete="/account">
Delete My Account Delete My Account
</button> </button>
<button hx-put="/account"> <button hx-put="/account">
Update My Account Update My Account
</button> </button>
</div> </div>
``` ```
@ -594,13 +599,13 @@ be confirmed. We could add an `unset` directive on it like so:
```html ```html
<div hx-confirm="Are you sure?"> <div hx-confirm="Are you sure?">
<button hx-delete="/account"> <button hx-delete="/account">
Delete My Account Delete My Account
</button> </button>
<button hx-put="/account"> <button hx-put="/account">
Update My Account Update My Account
</button> </button>
<button hx-confirm="unset" hx-get="/"> <button hx-confirm="unset" hx-get="/">
Cancel Cancel
</button> </button>
</div> </div>
``` ```
@ -643,11 +648,12 @@ However, you could wrap the htmx-enhanced input in a form element:
```html ```html
<form action="/search" method="POST"> <form action="/search" method="POST">
<input class="form-control" type="search" <input class="form-control" type="search"
name="search" placeholder="Begin Typing To Search Users..." name="search" placeholder="Begin Typing To Search Users..."
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>
``` ```
@ -699,25 +705,23 @@ pages to learn more about the new extensions.
If you wish to establish a `WebSocket` connection in htmx, you use the [hx-ws](/attributes/hx-ws) attribute: If you wish to establish a `WebSocket` connection in htmx, you use the [hx-ws](/attributes/hx-ws) attribute:
```html ```html
<div hx-ws="connect:wss:/chatroom"> <div hx-ws="connect:wss:/chatroom">
<div id="chat_room"> <div id="chat_room">
... ...
</div> </div>
<form hx-ws="send:submit"> <form hx-ws="send:submit">
<input name="chat_message"> <input name="chat_message">
</form> </form>
</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:
@ -731,9 +735,9 @@ a `connect <url>` declaration that specifies the URL from which Server Sent Even
Here is an example: Here is an example:
```html ```html
<body hx-sse="connect:/news_updates"> <body hx-sse="connect:/news_updates">
<div hx-trigger="sse:new_news" hx-get="/news"></div> <div hx-trigger="sse:new_news" hx-get="/news"></div>
</body> </body>
``` ```
Depending on your implementation, this may be more efficient than the polling example above since the server would Depending on your implementation, this may be more efficient than the polling example above since the server would
@ -747,7 +751,7 @@ If you want a given element to push its request URL into the browser navigation
to the browser's history, include the [hx-push-url](/attributes/hx-push-url) attribute: to the browser's history, include the [hx-push-url](/attributes/hx-push-url) attribute:
```html ```html
<a hx-get="/blog" hx-push-url="true">Blog</a> <a hx-get="/blog" hx-push-url="true">Blog</a>
``` ```
When a user clicks on this link, htmx will snapshot the current DOM and store it before it makes a request to /blog. When a user clicks on this link, htmx will snapshot the current DOM and store it before it makes a request to /blog.
@ -867,12 +871,13 @@ Here is an example of an input that uses the `htmx:validation:validate` event to
```html ```html
<form hx-post="/test"> <form hx-post="/test">
<input _="on htmx:validation:validate <input _="on htmx:validation:validate
if my.value != 'foo' if my.value != 'foo'
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>
``` ```
@ -892,8 +897,8 @@ defined in javascript](/extensions#defining) and then used via the [`hx-ext`](/a
```html ```html
<div hx-ext="debug"> <div hx-ext="debug">
<button hx-post="/example">This button used the debug extension</button> <button hx-post="/example">This button used the debug extension</button>
<button hx-post="/example" hx-ext="ignore:debug">This button does not</button> <button hx-post="/example" hx-ext="ignore:debug">This button does not</button>
</div> </div>
``` ```
@ -921,17 +926,17 @@ Htmx has an extensive [events mechanism](https://htmx.org/reference/#events), wh
If you want to register for a given htmx event you can use If you want to register for a given htmx event you can use
```js ```js
document.body.addEventListener('htmx:load', function(evt) { document.body.addEventListener('htmx:load', function(evt) {
myJavascriptLib.init(evt.details.elt); myJavascriptLib.init(evt.details.elt);
}); });
``` ```
or, if you would prefer, you can use the following htmx helper: or, if you would prefer, you can use the following htmx helper:
```javascript ```javascript
htmx.on("htmx:load", function(evt) { htmx.on("htmx:load", function(evt) {
myJavascriptLib.init(evt.details.elt); myJavascriptLib.init(evt.details.elt);
}); });
``` ```
The `htmx:load` event is fired every time an element is loaded into the DOM by htmx, and is effectively the equivalent The `htmx:load` event is fired every time an element is loaded into the DOM by htmx, and is effectively the equivalent
@ -944,9 +949,9 @@ Some common uses for htmx events are:
Using the `htmx:load` event to initialize content is so common that htmx provides a helper function: Using the `htmx:load` event to initialize content is so common that htmx provides a helper function:
```javascript ```javascript
htmx.onLoad(function(target) { htmx.onLoad(function(target) {
myJavascriptLib.init(target); myJavascriptLib.init(target);
}); });
``` ```
This does the same thing as the first example, but is a little cleaner. This does the same thing as the first example, but is a little cleaner.
@ -1007,11 +1012,11 @@ with other libraries. [Alpine.js](https://github.com/alpinejs/alpine/), for exa
If you set a logger at `htmx.logger`, every event will be logged. This can be very useful for troubleshooting: If you set a logger at `htmx.logger`, every event will be logged. This can be very useful for troubleshooting:
```javascript ```javascript
htmx.logger = function(elt, event, data) { htmx.logger = function(elt, event, data) {
if(console) { if(console) {
console.log(event, elt, data); console.log(event, elt, data);
}
} }
}
``` ```
## <a name="debugging"></a> [Debugging](#debugging) ## <a name="debugging"></a> [Debugging](#debugging)
@ -1027,7 +1032,7 @@ The first debugging tool you can use is the `htmx.logAll()` method. This will l
will allow you to see exactly what the library is doing. will allow you to see exactly what the library is doing.
```javascript ```javascript
htmx.logAll(); htmx.logAll();
``` ```
Of course, that won't tell you why htmx *isn't* doing something. You might also not know *what* events a DOM Of course, that won't tell you why htmx *isn't* doing something. You might also not know *what* events a DOM
@ -1036,7 +1041,7 @@ element is firing to use as a trigger. To address this, you can use the
browser console: browser console:
```javascript ```javascript
monitorEvents(htmx.find("#theElement")); monitorEvents(htmx.find("#theElement"));
``` ```
This will spit out all events that are occuring on the element with the id `theElement` to the console, and allow you This will spit out all events that are occuring on the element with the id `theElement` to the console, and allow you
@ -1086,7 +1091,7 @@ Here is an example of the code in action:
<!-- post to /foo --> <!-- post to /foo -->
<button hx-post="/foo" hx-target="#result"> <button hx-post="/foo" hx-target="#result">
Count Up Count Up
</button> </button>
<output id="result"></output> <output id="result"></output>
@ -1131,7 +1136,7 @@ on a DOM element, using the `on` syntax:
```html ```html
<div _="on htmx:afterSettle log 'Settled!'"> <div _="on htmx:afterSettle log 'Settled!'">
... ...
</div> </div>
``` ```
@ -1150,7 +1155,7 @@ In hyperscript you can implement this, as well as fade effect, like so:
```html ```html
<div _="on load wait 5s then transition opacity to 0 then remove me"> <div _="on load wait 5s then transition opacity to 0 then remove me">
Here is a temporary message! Here is a temporary message!
</div> </div>
``` ```
@ -1163,7 +1168,7 @@ In hyperscript similar functionality is implemented like so:
```html ```html
<body _="on htmx:error(errorInfo) fetch /errors {method:'POST', body:{errorInfo:errorInfo} as JSON} "> <body _="on htmx:error(errorInfo) fetch /errors {method:'POST', body:{errorInfo:errorInfo} as JSON} ">
... ...
</body> </body>
``` ```
@ -1192,10 +1197,10 @@ A good example of this is the [SortableJS demo](/examples/sortable/):
```html ```html
<form class="sortable" hx-post="/items" hx-trigger="end"> <form class="sortable" hx-post="/items" hx-trigger="end">
<div class="htmx-indicator">Updating...</div> <div class="htmx-indicator">Updating...</div>
<div><input type='hidden' name='item' value='1'/>Item 1</div> <div><input type='hidden' name='item' value='1'/>Item 1</div>
<div><input type='hidden' name='item' value='2'/>Item 2</div> <div><input type='hidden' name='item' value='2'/>Item 2</div>
<div><input type='hidden' name='item' value='2'/>Item 3</div> <div><input type='hidden' name='item' value='2'/>Item 3</div>
</form> </form>
``` ```
@ -1207,11 +1212,11 @@ In jquery you might do this like so:
$(document).ready(function() { $(document).ready(function() {
var sortables = document.body.querySelectorAll(".sortable"); var sortables = document.body.querySelectorAll(".sortable");
for (var i = 0; i < sortables.length; i++) { for (var i = 0; i < sortables.length; i++) {
var sortable = sortables[i]; var sortable = sortables[i];
new Sortable(sortable, { new Sortable(sortable, {
animation: 150, animation: 150,
ghostClass: 'blue-background-class' ghostClass: 'blue-background-class'
}); });
} }
}); });
``` ```
@ -1223,11 +1228,11 @@ rather than the entire document:
htmx.onLoad(function(content) { htmx.onLoad(function(content) {
var sortables = content.querySelectorAll(".sortable"); var sortables = content.querySelectorAll(".sortable");
for (var i = 0; i < sortables.length; i++) { for (var i = 0; i < sortables.length; i++) {
var sortable = sortables[i]; var sortable = sortables[i];
new Sortable(sortable, { new Sortable(sortable, {
animation: 150, animation: 150,
ghostClass: 'blue-background-class' ghostClass: 'blue-background-class'
}); });
} }
}) })
``` ```
@ -1240,9 +1245,9 @@ 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())
.then(data => { myDiv.innerHTML = data; htmx.process(myDiv); } ); .then(data => { myDiv.innerHTML = data; htmx.process(myDiv); } );
``` ```
@ -1253,19 +1258,19 @@ if they contain htmx attributes, will need a call to `htmx.process()` after they
example uses Alpine's `$watch` function to look for a change of value that would trigger conditional content: example uses Alpine's `$watch` function to look for a change of value that would trigger conditional content:
```html ```html
<div x-data="{show_new: false}" <div x-data="{show_new: false}"
x-init="$watch('show_new', value => { x-init="$watch('show_new', value => {
if (show_new) { if (show_new) {
htmx.process(document.querySelector('#new_content')) htmx.process(document.querySelector('#new_content'))
} }
})"> })">
<button @click = "show_new = !show_new">Toggle New Content</button> <button @click = "show_new = !show_new">Toggle New Content</button>
<template x-if="show_new"> <template x-if="show_new">
<div id="new_content"> <div id="new_content">
<a hx-get="/server/newstuff" href="#">New Clickable</a> <a hx-get="/server/newstuff" href="#">New Clickable</a>
</div> </div>
</template> </template>
</div> </div>
``` ```
## <a name="security"></a>[Security](#security) ## <a name="security"></a>[Security](#security)
@ -1287,9 +1292,9 @@ To address this, if you don't want a particular part of the DOM to allow for htm
This will prevent htmx from executing within that area in the DOM: This will prevent htmx from executing within that area in the DOM:
```html ```html
<div hx-disable> <div hx-disable>
<%= user_content %> <%= user_content %>
</div> </div>
``` ```
This approach allows you to enjoy the benefits of [Locality of Behavior](https://htmx.org/essays/locality-of-behaviour/) This approach allows you to enjoy the benefits of [Locality of Behavior](https://htmx.org/essays/locality-of-behaviour/)
@ -1329,7 +1334,7 @@ listed below:
You can set them directly in javascript, or you can use a `meta` tag: You can set them directly in javascript, or you can use a `meta` tag:
```html ```html
<meta name="htmx-config" content='{"defaultSwapStyle":"outerHTML"}'> <meta name="htmx-config" content='{"defaultSwapStyle":"outerHTML"}'>
``` ```
## Conclusion ## Conclusion