mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-02 15:25:26 +00:00
Merge remote-tracking branch 'origin/master'
This commit is contained in:
commit
3c8d41bc42
@ -1,7 +1,7 @@
|
||||
htmx.defineExtension('json-enc', {
|
||||
encodeParameters : function(xhr, parameters, elt) {
|
||||
xhr.requestHeaders['Content-Type'] = 'application/json';
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.overrideMimeType('text/json');
|
||||
return (JSON.stringify(parameters));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
@ -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.
|
||||
|
||||
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
|
||||
call it out with the `ic-indicator` attribute:
|
||||
call it out with the `hx-indicator` attribute:
|
||||
|
||||
```html
|
||||
<button hx-post="/example">
|
||||
@ -81,4 +81,4 @@ This simulates what a spinner might look like in that situation:
|
||||
|
||||
* `hx-indicator` is inherited and can be placed on a parent element
|
||||
* In the absence of an explicit indicator, the `htmx-request` class will be added to the element triggering the
|
||||
request
|
||||
request
|
||||
|
@ -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:
|
||||
|
||||
* 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.
|
||||
(e.g. `closest tr` will target the closest table row to the element)
|
||||
|
||||
|
@ -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:
|
||||
|
||||
```html
|
||||
<div hx-get="/news" trigger="every 2s">
|
||||
<div hx-get="/news" hx-trigger="every 2s">
|
||||
</div>
|
||||
```
|
||||
|
||||
|
@ -226,7 +226,7 @@ than a single value.
|
||||
##### Details
|
||||
|
||||
* `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.elt` - the element that triggered the request
|
||||
* `detail.target` - the target of the request
|
||||
|
@ -107,7 +107,7 @@ Below is a working demo of this example. The only email that will be accepted i
|
||||
|
||||
// templates
|
||||
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">
|
||||
<label>Email Address</label>
|
||||
<input name="email" hx-get="/contact/email" hx-indicator="#ind">
|
||||
|
@ -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,
|
||||
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)
|
||||
|
||||
The following extensions that are tested and distributed with htmx:
|
||||
@ -63,4 +69,4 @@ Extensions can override the following default extension fields:
|
||||
handleSwap : function(swapStyle, target, fragment, settleInfo) {return false;},
|
||||
encodeParameters : function(xhr, parameters, elt) {return null;}
|
||||
}
|
||||
```
|
||||
```
|
||||
|
@ -62,7 +62,7 @@ title: </> htmx - Attributes
|
||||
| `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-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-Target` | the `id` of the target element if it exists
|
||||
| `X-HX-Trigger-Name` | the `name` of the triggered element if it exists
|
||||
|
Loading…
x
Reference in New Issue
Block a user