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', {
|
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));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -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">
|
||||||
@ -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
|
* `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
|
* 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:
|
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)
|
||||||
|
|
||||||
|
@ -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>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
@ -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">
|
||||||
|
@ -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:
|
||||||
@ -63,4 +69,4 @@ Extensions can override the following default extension fields:
|
|||||||
handleSwap : function(swapStyle, target, fragment, settleInfo) {return false;},
|
handleSwap : function(swapStyle, target, fragment, settleInfo) {return false;},
|
||||||
encodeParameters : function(xhr, parameters, elt) {return null;}
|
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-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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user