mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-02 23:35:13 +00:00
support for hx-request
attribute with the following config values:
* `timeout` - the request timeout * `credentials` - send credentials w/ the request * `noHeaders` - do not send any non-standard headers with the request We also support the `htmx.config.timeout` configuration value for setting the default timeout
This commit is contained in:
parent
bbf2ae4412
commit
a4a9d2d733
30
src/htmx.js
30
src/htmx.js
@ -50,6 +50,7 @@ return (function () {
|
|||||||
allowEval:true,
|
allowEval:true,
|
||||||
attributesToSettle:["class", "style", "width", "height"],
|
attributesToSettle:["class", "style", "width", "height"],
|
||||||
withCredentials:false,
|
withCredentials:false,
|
||||||
|
timeout:0,
|
||||||
wsReconnectDelay: 'full-jitter',
|
wsReconnectDelay: 'full-jitter',
|
||||||
disableSelector: "[hx-disable], [data-hx-disable]",
|
disableSelector: "[hx-disable], [data-hx-disable]",
|
||||||
useTemplateFragments: false,
|
useTemplateFragments: false,
|
||||||
@ -2018,6 +2019,9 @@ return (function () {
|
|||||||
if (str.indexOf("javascript:") === 0) {
|
if (str.indexOf("javascript:") === 0) {
|
||||||
str = str.substr(11);
|
str = str.substr(11);
|
||||||
evaluateValue = true;
|
evaluateValue = true;
|
||||||
|
} else if (str.indexOf("js:") === 0) {
|
||||||
|
str = str.substr(3);
|
||||||
|
evaluateValue = true;
|
||||||
}
|
}
|
||||||
if (str.indexOf('{') !== 0) {
|
if (str.indexOf('{') !== 0) {
|
||||||
str = "{" + str + "}";
|
str = "{" + str + "}";
|
||||||
@ -2224,6 +2228,8 @@ return (function () {
|
|||||||
path = getDocument().location.href;
|
path = getDocument().location.href;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var requestAttrValues = getValuesForElement(elt, 'hx-request');
|
||||||
|
|
||||||
var requestConfig = {
|
var requestConfig = {
|
||||||
parameters: filteredParameters,
|
parameters: filteredParameters,
|
||||||
unfilteredParameters: allParameters,
|
unfilteredParameters: allParameters,
|
||||||
@ -2231,6 +2237,8 @@ return (function () {
|
|||||||
target:target,
|
target:target,
|
||||||
verb:verb,
|
verb:verb,
|
||||||
errors:errors,
|
errors:errors,
|
||||||
|
withCredentials: requestAttrValues.credentials || htmx.config.withCredentials,
|
||||||
|
timeout: requestAttrValues.timeout || htmx.config.timeout,
|
||||||
path:path,
|
path:path,
|
||||||
triggeringEvent:event
|
triggeringEvent:event
|
||||||
};
|
};
|
||||||
@ -2278,13 +2286,18 @@ return (function () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
xhr.overrideMimeType("text/html");
|
xhr.overrideMimeType("text/html");
|
||||||
xhr.withCredentials = htmx.config.withCredentials;
|
xhr.withCredentials = requestConfig.withCredentials;
|
||||||
|
xhr.timeout = requestConfig.timeout;
|
||||||
|
|
||||||
// request headers
|
// request headers
|
||||||
for (var header in headers) {
|
if (requestAttrValues.noHeaders) {
|
||||||
if (headers.hasOwnProperty(header)) {
|
// ignore all headers
|
||||||
var headerValue = headers[header];
|
} else {
|
||||||
safelySetHeaderValue(xhr, header, headerValue);
|
for (var header in headers) {
|
||||||
|
if (headers.hasOwnProperty(header)) {
|
||||||
|
var headerValue = headers[header];
|
||||||
|
safelySetHeaderValue(xhr, header, headerValue);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2336,6 +2349,13 @@ return (function () {
|
|||||||
maybeCall(reject);
|
maybeCall(reject);
|
||||||
endRequestLock();
|
endRequestLock();
|
||||||
}
|
}
|
||||||
|
xhr.ontimeout = function() {
|
||||||
|
removeRequestIndicatorClasses(indicators);
|
||||||
|
triggerErrorEvent(elt, 'htmx:afterRequest', responseInfo);
|
||||||
|
triggerErrorEvent(elt, 'htmx:timeout', responseInfo);
|
||||||
|
maybeCall(reject);
|
||||||
|
endRequestLock();
|
||||||
|
}
|
||||||
if(!triggerEvent(elt, 'htmx:beforeRequest', responseInfo)){
|
if(!triggerEvent(elt, 'htmx:beforeRequest', responseInfo)){
|
||||||
maybeCall(resolve);
|
maybeCall(resolve);
|
||||||
endRequestLock()
|
endRequestLock()
|
||||||
|
39
test/attributes/hx-request.js
Normal file
39
test/attributes/hx-request.js
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
describe("hx-request attribute", function() {
|
||||||
|
beforeEach(function () {
|
||||||
|
this.server = makeServer();
|
||||||
|
clearWorkArea();
|
||||||
|
});
|
||||||
|
afterEach(function () {
|
||||||
|
this.server.restore();
|
||||||
|
clearWorkArea();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('basic hx-request timeout works', function (done) {
|
||||||
|
var timedOut = false;
|
||||||
|
this.server.respondWith("GET", "/test", "Clicked!");
|
||||||
|
var div = make("<div hx-post='/vars' hx-request='\"timeout\":1'></div>")
|
||||||
|
htmx.on(div, 'htmx:timeout', function(){
|
||||||
|
timedOut = true;
|
||||||
|
})
|
||||||
|
div.click();
|
||||||
|
setTimeout(function(){
|
||||||
|
div.innerHTML.should.equal("");
|
||||||
|
// unfortunately it looks like sinon.js doesn't implement the timeout functionality
|
||||||
|
// timedOut.should.equal(true);
|
||||||
|
done();
|
||||||
|
}, 400)
|
||||||
|
});
|
||||||
|
|
||||||
|
it('hx-request header works', function () {
|
||||||
|
this.server.respondWith("POST", "/vars", function (xhr) {
|
||||||
|
should.equal(xhr.requestHeaders['HX-Request'], undefined);
|
||||||
|
xhr.respond(200, {}, "Clicked!")
|
||||||
|
});
|
||||||
|
var div = make("<div hx-post='/vars' hx-request='{\"noHeaders\":true}'></div>")
|
||||||
|
div.click();
|
||||||
|
this.server.respond();
|
||||||
|
div.innerHTML.should.equal("Clicked!");
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
});
|
@ -104,6 +104,7 @@
|
|||||||
<script src="attributes/hx-preserve.js"></script>
|
<script src="attributes/hx-preserve.js"></script>
|
||||||
<script src="attributes/hx-push-url.js"></script>
|
<script src="attributes/hx-push-url.js"></script>
|
||||||
<script src="attributes/hx-put.js"></script>
|
<script src="attributes/hx-put.js"></script>
|
||||||
|
<script src="attributes/hx-request.js"></script>
|
||||||
<script src="attributes/hx-select.js"></script>
|
<script src="attributes/hx-select.js"></script>
|
||||||
<script src="attributes/hx-sse.js"></script>
|
<script src="attributes/hx-sse.js"></script>
|
||||||
<script src="attributes/hx-swap-oob.js"></script>
|
<script src="attributes/hx-swap-oob.js"></script>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user