mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-30 22:41:23 +00:00
docs + kt-params
attribute
This commit is contained in:
parent
a0d9e8ffd8
commit
dfb3b6b8ec
40
src/kutty.js
40
src/kutty.js
@ -812,6 +812,36 @@ var kutty = kutty || (function () {
|
||||
}
|
||||
}
|
||||
|
||||
function filterValues(inputValues, elt, verb) {
|
||||
var paramsValue = getClosestAttributeValue(elt, "kt-params");
|
||||
if (paramsValue) {
|
||||
if (paramsValue === "none") {
|
||||
return {};
|
||||
} else if (paramsValue === "*") {
|
||||
return inputValues;
|
||||
} else if(paramsValue.indexOf("not ") === 0) {
|
||||
forEach(paramsValue.substr(4).split(","), function (value) {
|
||||
value = value.trim();
|
||||
delete inputValues[value];
|
||||
});
|
||||
return inputValues;
|
||||
} else {
|
||||
var newValues = {}
|
||||
forEach(paramsValue.split(","), function (value) {
|
||||
newValues[value] = inputValues[value];
|
||||
});
|
||||
return newValues;
|
||||
}
|
||||
} else {
|
||||
// By default GET does not include parameters
|
||||
if (verb === 'get') {
|
||||
return {};
|
||||
} else {
|
||||
return inputValues;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function issueAjaxRequest(elt, verb, path, eventTarget) {
|
||||
var eltData = getInternalData(elt);
|
||||
if (eltData.requestInFlight) {
|
||||
@ -836,16 +866,16 @@ var kutty = kutty || (function () {
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
||||
var inputValues = getInputValues(elt);
|
||||
var inputValues = getInputValues(elt, verb);
|
||||
var inputValues = filterValues(inputValues, elt, verb);
|
||||
|
||||
if(!triggerEvent(elt, 'values.kutty', {values: inputValues, target:target})) return endRequestLock();
|
||||
|
||||
// request type
|
||||
var requestURL;
|
||||
if (verb === 'get') {
|
||||
var includeQueryParams = getClosestAttributeValue("kt-get-params") === "true";
|
||||
// TODO allow get parameter filtering
|
||||
requestURL = path + (includeQueryParams ? "?" + urlEncode(inputValues) : "");
|
||||
xhr.open('GET', requestURL, true);
|
||||
var noValues = Object.keys(inputValues).length === 0;
|
||||
xhr.open('GET', path + (noValues ? "" : "?" + urlEncode(inputValues)), true);
|
||||
} else {
|
||||
requestURL = path;
|
||||
xhr.open('POST', requestURL, true);
|
||||
|
@ -35,13 +35,13 @@
|
||||
<a href="/docs">docs</a>
|
||||
</div>
|
||||
<div class="1 col">
|
||||
<a href="/docs/attributes">attributes</a>
|
||||
<a href="/attributes">attributes</a>
|
||||
</div>
|
||||
<div class="1 col">
|
||||
<a href="/docs/events">events</a>
|
||||
<a href="/events">events</a>
|
||||
</div>
|
||||
<div class="1 col">
|
||||
<a href="/docs/headers">headers</a>
|
||||
<a href="/headers">headers</a>
|
||||
</div>
|
||||
<div class="1 col">
|
||||
<a href="/patterns">patterns</a>
|
||||
|
@ -12,11 +12,12 @@ title: </> kutty - Attributes
|
||||
| kt-confirm | TODO - Description
|
||||
| kt-delete | TODO - Description
|
||||
| kt-error-url | TODO - Description
|
||||
| kt-get | TODO - Description
|
||||
| [kt-get](/attributes/kt-get) | issue a `GET` to the specified URL
|
||||
| kt-history-element | TODO - Description
|
||||
| kt-include | TODO - Description
|
||||
| kt-indicator | TODO - Description
|
||||
| kt-patch | TODO - Description
|
||||
| [kt-params](/attributes/kt-params) | filter the parameters that will be submitted with a request
|
||||
| kt-post | TODO - Description
|
||||
| kt-prompt | TODO - Description
|
||||
| kt-push-url | TODO - Description
|
24
www/attributes/kt-get.md
Normal file
24
www/attributes/kt-get.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
layout: layout.njk
|
||||
title: </> kutty - kt-get
|
||||
---
|
||||
|
||||
## `kt-get`
|
||||
|
||||
The `kt-get` attribute will cause an element to issue a `GET` to the specified URL and swap
|
||||
the HTML into the DOM using a swap strategy:
|
||||
|
||||
```html
|
||||
<div kt-get="/example">Get Some HTML</div>
|
||||
```
|
||||
|
||||
This example will cause the `div` to issue a `GET` to `/example` and swap the returned HTML into
|
||||
the `innerHTML` of the `div`.
|
||||
|
||||
### Notes
|
||||
|
||||
* By default `kt-get` does not include any parameters. You can use the [kt-params](/attributes/kt-params)
|
||||
attribute to change this
|
||||
* You can control the target of the swap using the [kt-target](/attributes/kt-target) attribute
|
||||
* You can control the swap strategy by using the [kt-swa](/attributes/kt-swap) attribute
|
||||
* You can control what event triggers the request with the [kt-trigger](/attributes/kt-trigger) attribute
|
27
www/attributes/kt-params.md
Normal file
27
www/attributes/kt-params.md
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
layout: layout.njk
|
||||
title: </> kutty - kt-params
|
||||
---
|
||||
|
||||
## `kt-params`
|
||||
|
||||
The `kt-params` attribute allows you to filter the parameters that will be submitted with an AJAX request.
|
||||
|
||||
The possible values of this attribute are:
|
||||
|
||||
* `none` - Include no parameters
|
||||
* `*` - Include all parameters
|
||||
* `not <param-list>` - Include all except the comma separated list of parameter names
|
||||
* `<param-list>` - Include all the comma separated list of parameter names
|
||||
|
||||
```html
|
||||
<div kt-get="/example" kt-params="*">Get Some HTML, Including Params</div>
|
||||
```
|
||||
|
||||
This div will include all the parameters that a `POST` would, but they will be URL encoded
|
||||
and included in the URL, as per usual with a `GET`.
|
||||
|
||||
### Notes
|
||||
|
||||
* The default value for all `GET`'s is `none`, to avoid polluting URLs
|
||||
* All other requests default to `*`
|
@ -42,7 +42,7 @@ The click to edit pattern provides a way to offer inline editing of all or part
|
||||
|
||||
* The form issues a `PUT` back to `/contacts/1`, following the usual REST-ful pattern.
|
||||
|
||||
{% include demo_ui %}
|
||||
{% include demo_ui.html.liquid %}
|
||||
|
||||
<script>
|
||||
//=========================================================================
|
||||
|
Loading…
x
Reference in New Issue
Block a user