comments formatted with check:

This commit is contained in:
Bill Talcott 2023-04-11 12:56:33 -04:00
parent 92b692a5b3
commit 2cd2397aee

View File

@ -54,7 +54,7 @@ In addition to these, `hx-swap` offers further control with the following modifi
`settle`::
Like `swap`, this allows you to apply a specific delay between when the content has been swapped into the DOM and when its attributes are "`settled`", that is, updated from their old values (if any) to their new values.
//This gives you fine control of css-transitions, for example.//
// check: This gives you fine control of css-transitions, for example.
`show`::
Allows you to specify an element that should be shown -- that is, scrolled into the viewport of the browser if necessary -- when a request is completed.
@ -297,13 +297,13 @@ Consider the following
scenario: your server-side team has decided that they want you to include a token for extra validation on every request.
The token is going to be stored in `localStorage` in the browser, in the slot `special-token`. The server-side team
wants you to include this special token on every request made by htmx, as the `X-SPECIAL-TOKEN` header.
// maybe: briefly show how to set the value in local storage
// check: maybe, briefly show how to set the value in local storage
How could you achieve this? One way would be to catch the `htmx:configRequest` event and update the `detail.headers`
object with this token from `localStorage`.
In VanillaJS, it would look something like this:
// In our Contact.app, for example, we would put this code (where?)
// check: In our Contact.app, for example, we would put this code... (where?)
// Mention htmx helper for adding listeners like this?
.Adding the `X-SPECIAL-TOKEN` header
[source,js]
@ -316,15 +316,15 @@ document.body.addEventListener("htmx:configRequest", function(configEvent){
As you can see, we add a new value to the `headers` property of the event's detail. After the event handler executes,
the `headers` property is read by htmx and used to construct the headers for an AJAX request.
// maybe: add basic info, is configEvent.detail.headers an htmx function?
// maybe: briefly explain what a header 'detail' refers to
// check: add basic info, is configEvent.detail.headers an htmx function?
// check: briefly explain what a header 'detail' refers to
So, with this bit of
JavaScript code, we have added a new custom header to every AJAX request that htmx makes. Slick!
// optional: explain the use case, something like 'this pattern of passing
// check: explain the use case, something like 'this pattern of passing
// and checking tokens is sometimes used for security'
You can also update the `parameters` property to change the parameters submitted by the request, change the target
of the request, and so on.
// an example parameter might be...
// check: an example parameter might be...
Full documentation for the `htmx:configRequest` event can be found
https://htmx.org/events/#htmx:configRequest[on the htmx website].
@ -397,7 +397,7 @@ a `POST` to the `/integrations/1` path, it will trigger a synchronization with t
Now, this synchronization may or may not result in new contacts being created. In the case where new contacts _are_
created, we want to refresh our contacts table. In the case where no contacts are created, we don't want to refresh
the table.
// maybe: show brief code, how to conditionally add HX-Trigger
// check: show brief code, how to conditionally add HX-Trigger
To implement this we could conditionally add an `HX-Trigger`
response header with the value `contacts-updated`. This value would trigger the `contacts-updated` event on the button that
made the AJAX request to `/integrations/1`. We can then take advantage of the `from:` modifier of the `hx-trigger`