💭 </> htmx ~ The response-targets Extension
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

!https://htmx.org/extensions/response-targets/

Date: April 30, 2024

</> htmx ~ The htmx Response Targets Extension Extension htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypert... htmx.org

The htmx </htmx/> response-targets extension allows me to respond to errors from the backend and do normal htmx swaps.

│ NOTE
│ │ ```
│ │ by default htmx will only swap on 200 and 300 responses
│ │ ```

Load the extension in head

```
<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/response-targets.js"></script>
```

Use the extension on an endpoint that might return a 400.

```
<div hx-ext="response-targets">
    <div id="response-div"></div>
    <button hx-post="/register"
            hx-target="#response-div"
            hx-target-5*="#serious-errors"
            hx-target-404="#not-found">
        Register!
    </button>
    <div id="serious-errors"></div>
    <div id="not-found"></div>
</div>
```

NOTE
│ This post is a thought </thoughts/>. It’s a short note that I make about someone else’s content online #thoughts </tags/thoughts/>