itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-27 04:50:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

add support for various request headers

Browse Source
This commit is contained in:
carson 2020-04-28 17:35:11 -07:00
parent 8f8ac0db7e
commit 14bea6c58e
2 changed files with 65 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/htmx.js
View File

@ -57,8 +57,7 @@ var HTMx = HTMx || (function () {
}
}
function swapResponse(elt, resp, after) {
var target = getTarget(elt);
function swapResponse(target, elt, resp, after) {
var swapStyle = getClosestAttributeValue(elt, "hx-swap");
if (swapStyle === "outerHTML") {
processResponseNodes(target.parentElement, target, resp, after);
@ -185,10 +184,27 @@ var HTMx = HTMx || (function () {
// core ajax request
function issueAjaxRequest(elt, url) {
var request = new XMLHttpRequest();
var target = getTarget(elt);
if (getClosestAttributeValue(elt, "hx-prompt")) {
var prompt = prompt(getClosestAttributeValue(elt, "hx-prompt"));
}
var xhr = new XMLHttpRequest();
// TODO - support more request types POST, PUT, DELETE, etc.
request.open('GET', url, true);
request.onload = function () {
// all should use POST and use the X-HTTP-Method-Override header
xhr.open('GET', url, true);
// request headers
xhr.setRequestHeader("X-HX-Request", "true");
xhr.setRequestHeader("X-HX-Trigger-Id", elt.getAttribute("id") || "");
xhr.setRequestHeader("X-HX-Trigger-Name", elt.getAttribute("name") || "");
xhr.setRequestHeader("X-HX-Target-Id", target.getAttribute("id") || "");
xhr.setRequestHeader("X-HX-Current-URL", document.location.href);
if (prompt) {
xhr.setRequestHeader("X-HX-Prompt", prompt);
}
xhr.onload = function () {
snapshotForCurrentHistoryEntry(elt, url);
var trigger = this.getResponseHeader("X-HX-Trigger");
handleTrigger(elt, trigger);
@ -198,7 +214,7 @@ var HTMx = HTMx || (function () {
if (this.status != 204) {
// Success!
var resp = this.response;
swapResponse(elt, resp, function(){
swapResponse(target, elt, resp, function(){
updateCurrentHistoryContent();
});
}
@ -207,11 +223,11 @@ var HTMx = HTMx || (function () {
elt.innerHTML = "ERROR";
}
};
request.onerror = function () {
xhr.onerror = function () {
// TODO error handling
// There was a connection error of some sort
};
request.send();
xhr.send();
}
function matches(el, selector) {

41
test/headers.js
View File

@ -8,6 +8,47 @@ describe("HTMx AJAX Headers Tests", function() {
clearWorkArea();
});
it("should include the X-HX-Request header", function(){
this.server.respondWith("GET", "/test", function(xhr){
xhr.requestHeaders['X-HX-Request'].should.be.equal('true');
xhr.respond(200, {}, "");
});
var div = make('<div hx-get="/test"></div>');
div.click();
this.server.respond();
})
it("should include the X-HX-Trigger-Id header", function(){
this.server.respondWith("GET", "/test", function(xhr){
xhr.requestHeaders['X-HX-Trigger-Id'].should.equal('d1');
xhr.respond(200, {}, "");
});
var div = make('<div id="d1" hx-get="/test"></div>');
div.click();
this.server.respond();
})
it("should include the X-HX-Trigger-Name header", function(){
this.server.respondWith("GET", "/test", function(xhr){
xhr.requestHeaders['X-HX-Trigger-Name'].should.equal('n1');
xhr.respond(200, {}, "");
});
var div = make('<button name="n1" hx-get="/test"></button>');
div.click();
this.server.respond();
})
it("should include the X-HX-Target-Id header", function(){
this.server.respondWith("GET", "/test", function(xhr){
console.log(xhr.requestHeaders);
xhr.requestHeaders['X-HX-Target-Id'].should.equal('d1');
xhr.respond(200, {}, "");
});
var div = make('<div hx-target="#d1" hx-get="/test"></div><div id="d1" ></div>');
div.click();
this.server.respond();
})
it("should handle simple string X-HX-Trigger response header properly", function(){
this.server.respondWith("GET", "/test", [200, {"X-HX-Trigger" : "foo"}, ""]);