Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

hx-error-swap and hx-error-target attributes #1619 #1620

Closed
wants to merge 7 commits into from
Closed

hx-error-swap and hx-error-target attributes #1619 #1620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
600147f
hx-error-swap and hx-error-target attributes #1619
Telroshan Jul 21, 2023
02152a9
Added httpErrorCodesToSwap config parameter
Telroshan Jul 23, 2023
b06fc15
Fix htmx.ajax error swap overrides + tests
Telroshan Jul 23, 2023
b8141a7
Fix htmx.ajax "mirror" errorSwap override value + test
Telroshan Jul 23, 2023
4a5a41d
Store default swap style, avoid passing error bool all the way down
Telroshan Jul 23, 2023
ee12844
Remove httpErrorCodesToSwap to alleviate PR
Telroshan Jul 27, 2023
5107b76
Removed default error config params to alleviate PR
Telroshan Oct 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/htmx.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export function ajax(verb: string, path: string, selector: string): Promise<void
export function ajax(
verb: string,
path: string,
context: Partial<{ source: any; event: any; handler: any; target: any; swap: any; values: any; headers: any }>
context: Partial<{ source: any; event: any; handler: any; target: any; errorTarget:any; swap: any; errorSwap: any; values: any; headers: any }>
): Promise<void>;

/**
Expand Down
103 changes: 92 additions & 11 deletions src/htmx.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -731,6 +731,45 @@ return (function () {
}
}

/**
* @param elt
* @param initialTarget
* @param swapOverride
* @returns {{shouldSwap: boolean, target: (HTMLElement|null), targetStr: string}}
*/
function getErrorTargetSpec(elt, initialTarget, swapOverride) {
var targetStr = getClosestAttributeValue(elt, "hx-error-target")
var swapStr = swapOverride || getClosestAttributeValue(elt, "hx-error-swap")
if ((!targetStr && !swapStr) || swapStr === "none") {
return {
shouldSwap: false,
target: null,
targetStr: "",
}
}
if (targetStr) {
var target
if (targetStr === "mirror") {
target = initialTarget
} else if (targetStr === "this") {
target = findThisElement(elt, "hx-error-target") || elt;
} else {
target = querySelectorExt(elt, targetStr)
}
return {
shouldSwap: true,
target: target,
targetStr: targetStr,
}
}
// fallback to normal hx-target if no error target was specified
return {
shouldSwap: true,
target: initialTarget,
targetStr: "",
}
}

function shouldSettleAttribute(name) {
var attributesToSettle = htmx.config.attributesToSettle;
for (var i = 0; i < attributesToSettle.length; i++) {
Expand Down Expand Up @@ -2648,11 +2687,26 @@ return (function () {
/**
*
* @param {HTMLElement} elt
* @param {string} swapInfoOverride
* @param {string?} swapInfoOverride
* @param {boolean?} isStandardErrorSwap
* @returns {import("./htmx").HtmxSwapSpecification}
*/
function getSwapSpecification(elt, swapInfoOverride) {
var swapInfo = swapInfoOverride ? swapInfoOverride : getClosestAttributeValue(elt, "hx-swap");
function getSwapSpecification(elt, swapInfoOverride, isStandardErrorSwap) {
var swapInfo
if (swapInfoOverride) {
swapInfo = swapInfoOverride
} else if (isStandardErrorSwap) {
swapInfo = getClosestAttributeValue(elt, "hx-error-swap")
if (!swapInfo && !getClosestAttributeValue(elt, "hx-error-target")) {
// If neither hx-error-swap nor hx-error-target are defined, set swap strategy to none
swapInfo = "none"
} else if (!swapInfo || swapInfo === "mirror") {
// If hx-error-swap isn't defined but hx-error-target is, use the standard swap strategy
swapInfo = getClosestAttributeValue(elt, "hx-swap") || htmx.config.defaultSwapStyle
}
} else {
swapInfo = getClosestAttributeValue(elt, "hx-swap")
}
var swapSpec = {
"swapStyle" : getInternalData(elt).boosted ? 'innerHTML' : htmx.config.defaultSwapStyle,
"swapDelay" : htmx.config.defaultSwapDelay,
Expand Down Expand Up @@ -2897,7 +2951,9 @@ return (function () {
headers : context.headers,
values : context.values,
targetOverride: resolveTarget(context.target),
errorTargetOverride: resolveTarget(context.errorTarget),
swapOverride: context.swap,
errorSwapOverride: context.errorSwap,
returnPromise: true
});
}
Expand Down Expand Up @@ -3421,19 +3477,45 @@ return (function () {
return;
}

// by default htmx only swaps on 200 return codes and does not swap
// on 204 'No Content'
// this can be overridden by responding to the htmx:beforeSwap event and
// overriding the detail.shouldSwap property
var shouldSwap = xhr.status >= 200 && xhr.status < 400 && xhr.status !== 204;

var isError = xhr.status >= 400;
var swapOverride = isError ? etc.errorSwapOverride : etc.swapOverride;
// User could force shouldSwap to true from a htmx:beforeSwap listener, in which case we don't want to
// interfere with hx-error-target & hx-error-swap logic by relying solely on isError
var isStandardErrorSwap = false
if (isError) {
if (etc.errorTargetOverride) {
responseInfo.target = etc.errorTargetOverride
}
// Error swap override set to "mirror" should replicate standard swap override if defined
// Otherwise, fallback to attributes then default strategy
if (swapOverride === "mirror" && etc.swapOverride) {
swapOverride = etc.swapOverride
}
var errorSwapSpec = getErrorTargetSpec(elt, responseInfo.target, swapOverride);
if (errorSwapSpec.shouldSwap) {
shouldSwap = true;
isStandardErrorSwap = true
responseInfo.target = errorSwapSpec.target;
if (responseInfo.target == null || responseInfo.target == DUMMY_ELT) {
triggerErrorEvent(elt, 'htmx:targetError', {target: errorSwapSpec.targetStr});
return;
}
}
}

if (hasHeader(xhr,/HX-Retarget:/i)) {
responseInfo.target = getDocument().querySelector(xhr.getResponseHeader("HX-Retarget"));
}

var historyUpdate = determineHistoryUpdates(elt, responseInfo);

// by default htmx only swaps on 200 return codes and does not swap
// on 204 'No Content'
// this can be ovverriden by responding to the htmx:beforeSwap event and
// overriding the detail.shouldSwap property
var shouldSwap = xhr.status >= 200 && xhr.status < 400 && xhr.status !== 204;
var serverResponse = xhr.response;
var isError = xhr.status >= 400;
var ignoreTitle = htmx.config.ignoreTitle
var beforeSwapDetails = mergeObjects({shouldSwap: shouldSwap, serverResponse:serverResponse, isError:isError, ignoreTitle:ignoreTitle }, responseInfo);
if (!triggerEvent(target, 'htmx:beforeSwap', beforeSwapDetails)) return;
Expand Down Expand Up @@ -3461,11 +3543,10 @@ return (function () {
saveCurrentPageToHistory();
}

var swapOverride = etc.swapOverride;
if (hasHeader(xhr,/HX-Reswap:/i)) {
swapOverride = xhr.getResponseHeader("HX-Reswap");
}
var swapSpec = getSwapSpecification(elt, swapOverride);
var swapSpec = getSwapSpecification(elt, swapOverride, isStandardErrorSwap);

if (swapSpec.hasOwnProperty('ignoreTitle')) {
ignoreTitle = swapSpec.ignoreTitle;
Expand Down
Loading