Merge remote-tracking branch 'origin/master'

This commit is contained in:
carson 2020-05-29 14:21:47 -07:00
commit 3c8d41bc42
8 changed files with 17 additions and 11 deletions

View File

@ -1,6 +1,6 @@
htmx.defineExtension('json-enc', { htmx.defineExtension('json-enc', {
encodeParameters : function(xhr, parameters, elt) { encodeParameters : function(xhr, parameters, elt) {
xhr.requestHeaders['Content-Type'] = 'application/json'; xhr.setRequestHeader('Content-Type', 'application/json');
xhr.overrideMimeType('text/json'); xhr.overrideMimeType('text/json');
return (JSON.stringify(parameters)); return (JSON.stringify(parameters));
} }

View File

@ -54,12 +54,12 @@ CSS. Here is an example that uses `display` rather than opacity:
} }
``` ```
Note that the target of the `ic-indicator` selector need not be the exact element that you Note that the target of the `hx-indicator` selector need not be the exact element that you
want to show: it can be any element in the parent hierarchy of the indicator. want to show: it can be any element in the parent hierarchy of the indicator.
Finally, note that the `htmx-request` class by default is added to the element causing Finally, note that the `htmx-request` class by default is added to the element causing
the request, so you can place an indicator inside of that element and not need to explictly the request, so you can place an indicator inside of that element and not need to explictly
call it out with the `ic-indicator` attribute: call it out with the `hx-indicator` attribute:
```html ```html
<button hx-post="/example"> <button hx-post="/example">

View File

@ -9,7 +9,7 @@ The `hx-target` attribute allows you to target a different element for swapping
request. The value of this attribute can be: request. The value of this attribute can be:
* a CSS query selector of the element to target * a CSS query selector of the element to target
* `this` which indicates that the element that the `ic-target` attribute is on is the target * `this` which indicates that the element that the `hx-target` attribute is on is the target
* `closest <CSS selector>` which will find the closest parent ancestor that matches the given CSS selector. * `closest <CSS selector>` which will find the closest parent ancestor that matches the given CSS selector.
(e.g. `closest tr` will target the closest table row to the element) (e.g. `closest tr` will target the closest table row to the element)

View File

@ -189,7 +189,7 @@ 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" trigger="every 2s"> <div hx-get="/news" hx-trigger="every 2s">
</div> </div>
``` ```

View File

@ -226,7 +226,7 @@ than a single value.
##### Details ##### Details
* `detail.parameters` - the parameters that will be submitted in the request * `detail.parameters` - the parameters that will be submitted in the request
* `detail.unfilteredParameters` - the parameters that were found before filtering by [`ic-select`](/attributes/ic-select) * `detail.unfilteredParameters` - the parameters that were found before filtering by [`hx-select`](/attributes/hx-select)
* `detail.headers` - the request headers * `detail.headers` - the request headers
* `detail.elt` - the element that triggered the request * `detail.elt` - the element that triggered the request
* `detail.target` - the target of the request * `detail.target` - the target of the request

View File

@ -107,7 +107,7 @@ Below is a working demo of this example. The only email that will be accepted i
// templates // templates
function formTemplate(page) { function formTemplate(page) {
return `<h3>Signup Form</h3><form ic-post-to="/contact"> return `<h3>Signup Form</h3><form hx-post="/contact">
<div hx-target="this" hx-swap="outerHTML"> <div hx-target="this" hx-swap="outerHTML">
<label>Email Address</label> <label>Email Address</label>
<input name="email" hx-get="/contact/email" hx-indicator="#ind"> <input name="email" hx-get="/contact/email" hx-indicator="#ind">

View File

@ -18,6 +18,12 @@ To use an extension you use the [hx-ext](/attributes/hx-ext) attribute:
Note that the `hx-ext` tag may be placed on parent elements if you want a plugin to apply to an entire swath of the dom, Note that the `hx-ext` tag may be placed on parent elements if you want a plugin to apply to an entire swath of the dom,
and on the `body` tag for it to apply to all htmx requests. and on the `body` tag for it to apply to all htmx requests.
**Tip:** To use multiple extensions on one element, separate them with a comma:
```html
<button hx-post="/example" hx-ext="debug, json-enc">This Button Uses Two Extensions</button>
```
## <a name="included"></a> [Included Extensions](#included) ## <a name="included"></a> [Included Extensions](#included)
The following extensions that are tested and distributed with htmx: The following extensions that are tested and distributed with htmx:

View File

@ -62,7 +62,7 @@ title: </> htmx - Attributes
| `X-HX-Active-Element` | the `id` of the active element if it exists | `X-HX-Active-Element` | the `id` of the active element if it exists
| `X-HX-Current-URL` | the current URL of the browser | `X-HX-Current-URL` | the current URL of the browser
| `X-HX-Event-Target` | the `id` of the original event target | `X-HX-Event-Target` | the `id` of the original event target
| `X-HX-Prompt` | the user response to an [ic-prompt](/attributes/hx-prompt) | `X-HX-Prompt` | the user response to an [hx-prompt](/attributes/hx-prompt)
| `X-HX-Request` | always `true` | `X-HX-Request` | always `true`
| `X-HX-Target` | the `id` of the target element if it exists | `X-HX-Target` | the `id` of the target element if it exists
| `X-HX-Trigger-Name` | the `name` of the triggered element if it exists | `X-HX-Trigger-Name` | the `name` of the triggered element if it exists