sharpetronics/hypermedia-systems
1
0
Fork 0
mirror of https://github.com/bigskysoftware/hypermedia-systems.git synced 2025-12-03 00:03:50 -05:00
Code Issues Projects Releases Wiki Activity

comments formatted with check:

Browse Source
This commit is contained in:
Bill Talcott 2023-04-11 12:56:33 -04:00
parent 92b692a5b3
commit 2cd2397aee
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
book/CH09_TricksOfThehtmxMasters.adoc
View File

@ -54,7 +54,7 @@ In addition to these, `hx-swap` offers further control with the following modifi
`settle`:: `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. 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`:: `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. 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. 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 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. 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` 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`. object with this token from `localStorage`.
In VanillaJS, it would look something like this: 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? // Mention htmx helper for adding listeners like this?
.Adding the `X-SPECIAL-TOKEN` header .Adding the `X-SPECIAL-TOKEN` header
[source,js] [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, 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. 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? // check: add basic info, is configEvent.detail.headers an htmx function?
// maybe: briefly explain what a header 'detail' refers to // check: briefly explain what a header 'detail' refers to
So, with this bit of So, with this bit of
JavaScript code, we have added a new custom header to every AJAX request that htmx makes. Slick! 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' // 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 You can also update the `parameters` property to change the parameters submitted by the request, change the target
of the request, and so on. 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 Full documentation for the `htmx:configRequest` event can be found
https://htmx.org/events/#htmx:configRequest[on the htmx website]. 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_ 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 created, we want to refresh our contacts table. In the case where no contacts are created, we don't want to refresh
the table. 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` 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 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` made the AJAX request to `/integrations/1`. We can then take advantage of the `from:` modifier of the `hx-trigger`