diff --git a/src/ext/preload.js b/src/ext/preload.js index aa9d2d25..9caa7e3c 100644 --- a/src/ext/preload.js +++ b/src/ext/preload.js @@ -1,7 +1,7 @@ // This adds the "preload" extension to htmx. By default, this will // preload the targets of any tags with `href` or `hx-get` attributes // if they also have a `preload` attribute as well. See documentation -// for more detauls +// for more details htmx.defineExtension("preload", { onEvent: function(name, event) { diff --git a/www/attributes/hx-prompt.md b/www/attributes/hx-prompt.md index 22ca312f..f39cb8a8 100644 --- a/www/attributes/hx-prompt.md +++ b/www/attributes/hx-prompt.md @@ -6,7 +6,7 @@ title: htmx - hx-prompt ## `hx-prompt` The `hx-prompt` attribute allows you to show a prompt before issuing a request. The value of -the prompt will be included in the requst in the `HX-Prompt` header. +the prompt will be included in the request in the `HX-Prompt` header. Here is an example: diff --git a/www/attributes/hx-target.md b/www/attributes/hx-target.md index c1018c7d..a53bf9b6 100644 --- a/www/attributes/hx-target.md +++ b/www/attributes/hx-target.md @@ -28,6 +28,11 @@ Here is an example that targets a div: The response from the `/register` url will be appended to the `div` with the id `response-div`. +This example uses `hx-target="this"` to make a link that updates itself when clicked: +```html +New link +``` + ### Notes * `hx-target` is inherited and can be placed on a parent element diff --git a/www/attributes/hx-trigger.md b/www/attributes/hx-trigger.md index f765e1a4..6b81565c 100644 --- a/www/attributes/hx-trigger.md +++ b/www/attributes/hx-trigger.md @@ -88,7 +88,10 @@ The response from the `/search` url will be appended to the `div` with the id `s There are two special events that are non-standard that htmx supports: * `load` - triggered on load (useful for lazy-loading something) -* `revealed` - triggered when an element is scrolled into the viewport (also useful for lazy-loading) +* `revealed` - triggered when an element is scrolled into the viewport (also useful for lazy-loading). If you are using `overflow` in css like `overflow-y: scroll` you should use `intersect once` instead of `revealed`. +* `intersect` - fires once when an element first intersects the viewport. This supports two additional options: + * `root:` - a CSS selector of the root element for intersection + * `threshold:` - a floating point number between 0.0 and 1.0, indicating what amount of intersection to fire the event on ### Triggering via the `HX-Trigger` header diff --git a/www/docs.md b/www/docs.md index d0452d7a..cdffa610 100644 --- a/www/docs.md +++ b/www/docs.md @@ -239,7 +239,7 @@ and the element will cancel the polling. #### [Load Polling](#load_polling) Another technique that can be used to achieve polling in htmx is "load polling", where an element specifies -an `load` trigger along with a delay, and replaces itself with the response: +a `load` trigger along with a delay, and replaces itself with the response: ```html
[CSS Transitions](#css_transitions) @@ -628,6 +628,17 @@ event, which you can handle. In the event of a connection error, the `htmx:sendError` event will be triggered. +### [CORS](#cors) + +When using htmx in a cross origin context, remember to configure your web +server to set Access-Control headers in order for htmx headers to be visible +on the client side. + +- [Access-Control-Allow-Headers (for request headers)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers) +- [Access-Control-Expose-Headers (for response headers)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers) + +[See all the request and response headers that htmx implements.](/reference/#request_headers) + ### [Request Headers](#request-headers) htmx includes a number of useful headers in requests: @@ -653,6 +664,9 @@ htmx supports some htmx-specific response headers: For more on the `HX-Trigger` headers, see [`HX-Trigger` Response Headers](/headers/hx-trigger). +Submitting a form via htmx has the benefit, that the [Post/Redirect/Get Pattern](https://en.wikipedia.org/wiki/Post/Redirect/Get) is not needed + any more. After successful processing a POST request on the server, you don't need to return a [HTTP 302 (Redirect)](https://en.wikipedia.org/wiki/HTTP_302). You can directly return the new HTML fragment. + ### [Request Order of Operations](#request-operations) The order of operations in a htmx request are: @@ -1025,6 +1039,27 @@ htmx attributes in it, you would need to add a call to `htmx.process()` like thi .then(data => { myDiv.innerHTML = data; htmx.process(myDiv); } ); ``` +Some 3rd party libraries create content from HTML template elements. For instance, Alpine JS uses the `x-if` +attribute on templates to add content conditionally. Such templates are not initially part of the DOM and, +if they contain htmx attributes, will need a call to `htmx.process()` after they are loaded. The following +example uses Alpine's `$watch` function to look for a change of value that would trigger conditional content: + +```html +
+ + +
+``` + ## [Security](#security) htmx allows you to define logic directly in your DOM. This has a number of advantages, the diff --git a/www/events.md b/www/events.md index 1b540dc6..a5a19fb0 100644 --- a/www/events.md +++ b/www/events.md @@ -115,7 +115,6 @@ the documentation on [configuring swapping](/docs#modifying_swapping_behavior_wi * `detail.elt` - the element that dispatched the request * `detail.xhr` - the `XMLHttpRequest` -* `detail.target` - the target of the request * `detail.requestConfig` - the configuration of the AJAX request * `detail.shouldSwap` - if the content will be swapped (defaults to `false` for non-200 response codes) * `detail.target` - the target of the swap diff --git a/www/img/commspace.svg b/www/img/commspace.svg new file mode 100644 index 00000000..d46cf956 --- /dev/null +++ b/www/img/commspace.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/index.md b/www/index.md index 2617c25e..32884042 100644 --- a/www/index.md +++ b/www/index.md @@ -23,13 +23,12 @@ IE11 compatible ## motivation -* Why should only `` and `
` be able to make HTTP requests? -* Why should only `click` & `submit` events trigger them? -* Why should only GET & POST be available? -* Why should you only be able to replace the *entire* screen? +* Why should only [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) and [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) be able to make HTTP requests? +* Why should only [`click`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) & [`submit`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event) events trigger them? +* Why should only [`GET`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) & [`POST`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST) methods be [available](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods)? +* Why should you only be able to replace the **entire** screen? -By removing these arbitrary constraints htmx completes HTML as a -[hypertext](https://en.wikipedia.org/wiki/Hypertext) +By removing these arbitrary constraints, htmx completes HTML as a [hypertext](https://en.wikipedia.org/wiki/Hypertext) ## quick start @@ -50,24 +49,35 @@ htmx is the successor to [intercooler.js](http://intercoolerjs.org) Read the [docs introduction](/docs#introduction) for a more in-depth... introduction. +## sponsors + +Thank you to our corporate sponsors! +
+[![CommSpace](/img/commspace.svg)](https://www.commspace.co.za/) + +
+ +
+ +
+ +
+ +
+
+ +If you use htmx commercially & wish to support the +project you can sponsor us via [Github](https://github.com/sponsors/bigskysoftware) + +For htmx consulting or training [email us](mailto:htmx@bigsky.software) + ## haiku *javascript fatigue:
longing for a hypertext
already in hand* -
-
-## support - -If you use htmx commercially & wish to support the -project you can sponsor us on [Github](https://github.com/sponsors/bigskysoftware) - -For consulting & training on htmx, [contact us](mailto:consulting@bigsky.software) - - -
\ No newline at end of file diff --git a/www/server-examples.md b/www/server-examples.md index c7baba4d..beee383f 100644 --- a/www/server-examples.md +++ b/www/server-examples.md @@ -38,6 +38,8 @@ These examples may make it a bit easier to get started using htmx with your plat - - +- +- ### FastAPI