diff --git a/www/docs.md b/www/docs.md index 0759f335..7fcc4eb3 100644 --- a/www/docs.md +++ b/www/docs.md @@ -23,7 +23,7 @@ title: htmx - high power tools for html * [parameters](#parameters) * [history](#history) * [requests & responses](#requests) -* [misc](#misc) +* [miscellaneous](#miscellaneous) * [extensions](#extensions) * [events & logging](#events) * [configuring](#config) @@ -362,10 +362,10 @@ event. Htmx provides a simple mechanism for interacting with the [browser history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API): If you want a given element to push its request URL into the browser navigation bar and add the current state of the page -to the browser's history, include the [hx-push](/attributes/hx-push) attribute: +to the browser's history, include the [hx-push-url](/attributes/hx-push-url) attribute: ```html - Blog + Blog ``` When a user clicks on this link, htmx will snapshot the current DOM and store it before it makes a request to /blog. @@ -377,7 +377,7 @@ When a user hits the back button, htmx will retrieve the old content from storag ### Specifying History Snapshot Element By default, htmx will use the `body` to take and restore the history snapshop from. This is usually the right thing, but -if you want to use a narrower element for snapshotting you can use the [hx-history-element](/attributes/hx-history-element) +if you want to use a narrower element for snapshotting you can use the [hx-history-elt](/attributes/hx-history-elt) attribute to specify a different one. Careful: this element will need to be on all pages or restoring from history won't work reliably. @@ -439,7 +439,7 @@ The order of operations in a htmx request are: You can use the `htmx-swapping` and `htmx-settling` classes to create [CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) between pages. -## Miscellaneous Attributes +## [Miscellaneous](#miscellaneous) In addition to the core AJAX functionality, htmx also has a few other tricks up its sleeve that help you build nice interfaces without javascript. diff --git a/www/examples/delete-row.md b/www/examples/delete-row.md index 09434ac6..fdabbcd6 100644 --- a/www/examples/delete-row.md +++ b/www/examples/delete-row.md @@ -4,30 +4,8 @@ layout: demo_layout.njk ## Delete Row -This example shows how to implement a delete button that removes a table row upon completion. - -Each row has a button with a `hx-delete` attribute containing the url on which to issue a DELETE request to delete the row from the server. -This request should respond with empty content. - -```html - - Angie MacDowell - angie@macdowell.org - Active - - - - -``` - -In order to tell where to put this empty content, the table body has an `hx-target` attribute set to `closest tr` . This will target the row containing the button which triggred the action, replacing it by... nothing. - -It also has a `hx-swap` attribute set to `outerHTML 1s` in order to replace the row itself, with a 1 second delay allowing for a CSS3 transition to fade the row out. -During this one second delay, the class "kutty-swapping" is added to `tr` element about to be replaced. - -Finally, the body also has a `hx-confirm` attribute so that a confirmation popup is shown before triggering the action for real. +This example shows how to implement a delete button that removes a table row upon completion. First let's look at the +table body: ```html @@ -45,6 +23,45 @@ Finally, the body also has a `hx-confirm` attribute so that a confirmation popup
``` +The table body has a [`hx-confirm`](/attributes/hx-confirm) attribute to confirm the delete action. It also +set the target to be the `closest tr` that is, the closest table row, for all the buttons ([`hx-target`](/attributes/hx-target) +is inherited from parents in the DOM.) The swap specification in [`hx-swap`](/attributes/hx-swap) says to swap the +entire target out and to wait 1 second after receiving a response. This last bit is so that we can use the following +CSS: + +```css +tr.htmx-swapping td { + opacity: 0; + transition: opacity 1s ease-out; +} +``` + +To fade the row out before it is swapped/removed. + +Each row has a button with a [`hx-delete`](/attributes/hx-delete) attribute containing the url on which to issue a `DELETE` +request to delete the row from the server. This request responds with empty content, indicating that the row should +be replaced with nothing. + +```html + + Angie MacDowell + angie@macdowell.org + Active + + + + +``` + + + {% include demo_ui.html.liquid %} - - + \ No newline at end of file diff --git a/www/headers/x-ht-trigger.md b/www/headers/x-hx-trigger.md similarity index 98% rename from www/headers/x-ht-trigger.md rename to www/headers/x-hx-trigger.md index 55f8b7e8..bf3ff036 100644 --- a/www/headers/x-ht-trigger.md +++ b/www/headers/x-hx-trigger.md @@ -55,4 +55,4 @@ object: `X-HX-Trigger: {"event1":"A message", "event2":"Another message"}` -Using events gives you a lot of flexibility to add functionality to normal htmx responses. \ No newline at end of file +Using events gives you a lot of flexibility to add functionality to normal htmx responses.