bigskysoftware
Clarify `response-targets` extension documentation
The Response targets extension quietly has this note at the bottom:
To avoid surprises the hx-ext attribute used to enable this extension should be placed on a parent element containing elements with hx-target-… and hx-target attributes.
I don't think this sufficiently explains the issue and how to get around it. (It caused me quite a headache).
Allow me to present some examples of working and non-working code.
I'd wager that most htmx users would not be able to tell at a glance that two of these work and two of them don't.
Examples
Example 1
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/ext/response-targets"></script>
</head>
<body hx-ext="response-targets">
<main>
<button hx-get="/broken-link" hx-target="body" hx-target-error="body">Click Me</button>
</main>
</body>
</html>
Example 2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/ext/response-targets"></script>
</head>
<body>
<main hx-ext="response-targets">
<output id="output"></output>
<button hx-get="/broken-link" hx-target="output" hx-target-error="#output">Click Me</button>
</main>
</body>
</html>
Example 3
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 3</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/ext/response-targets"></script>
</head>
<body>
<main hx-ext="response-targets">
<button hx-get="/broken-link" hx-target="body" hx-target-error="body">Click Me</button>
</main>
</body>
</html>
Example 4
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 4</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/ext/response-targets"></script>
</head>
<body>
<main hx-ext="response-targets">
<output id="output"></output>
<button hx-get="/broken-link" hx-target="body" hx-target-error="#output">Click Me</button>
</main>
</body>
</html>
Mayble I'm an idiot, but the way I'd choose to explain it is to say something like:
To avoid surprises the hx-ext attribute used to enable this extension
shouldmust be placed on an element that is a parent of all elments referenced in the hx-target and hx-target- attributes.a parent element containing elements with hx-target-… and hx-target attributes.
I apologize for the aggressive tone, this was a frustrating issue for me. I very much appreciate the work of the htmx team- htmx is a fantastic piece of software, and has reduced the complexity of every project I've added it to.
Thank you kindly for opening up this issue, I had tried a lot of odd things to get this working with no luck until I read this helpful write up. 🙏
I had a similar problem, I had the response container outside my container where I load the extension. Finally i find the solution :)
