htmx Response Targets Extension

This extension allows you to specify different target elements to be swapped when different HTTP response codes are received.

It uses attribute names in a form of hx-target-[CODE] where [CODE] is a numeric HTTP response code with the optional wildcard character at its end. You can also use hx-target-error, which handles both 4xx and 5xx response codes.

The value of each attribute can be:

Installing

The fastest way to install response-targets is to load it via a CDN. Remember to always include the core htmx library before the extension and enable the extension.

<head>
    <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/htmx-ext-response-targets@2.0.2" integrity="sha384-T41oglUPvXLGBVyRdZsVRxNWnOOqCynaPubjUVjxhsjFTKrFJGEMm3/0KGmNQ+Pg" crossorigin="anonymous"></script>
</head>
<body hx-ext="response-targets">
...

An unminified version is also available at https://unpkg.com/htmx-ext-response-targets/dist/response-targets.js.

While the CDN approach is simple, you may want to consider not using CDNs in production. The next easiest way to install response-targets is to simply copy it into your project. Download the extension from https://unpkg.com/htmx-ext-response-targets, add it to the appropriate directory in your project and include it where necessary with a <script> tag.

For npm-style build systems, you can install response-targets via npm:

npm install htmx-ext-response-targets

After installing, you’ll need to use appropriate tooling to bundle node_modules/htmx-ext-response-targets/dist/response-targets.js (or .min.js). For example, you might bundle the extension with htmx core from node_modules/htmx.org/dist/htmx.js and project-specific code.

If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):

import `htmx.org`;
import `htmx-ext-response-targets`;

Configure (optional)

Usage

Here is an example that targets a div for normal (200) response but another div for 404 (not found) response, and yet another for all 5xx response codes:

<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>

Sometimes you may not want to handle 5xx and 4xx errors separately, in which case you can use hx-target-error:

<div hx-ext="response-targets">
<div id="response-div"></div>
<button hx-post="/register"
hx-target="#response-div"
hx-target-error="#any-errors">
Register!
</button>
<div id="any-errors"></div>
</div>

2xx codes will be handled as in the previous example. However, when the response code is 5xx or 4xx, the response from /register will replace the contents of the div with the id any-errors.

Wildcard resolution

When status response code does not match existing hx-target-[CODE] attribute name then its numeric part expressed as a string is trimmed with last character being replaced with the asterisk (*). This lookup process continues until the attribute is found or there are no more digits.

For example, if a browser receives 404 error code, the following attribute names will be looked up (in the given order):

If you are using tools that do not support asterisks in HTML attributes, you may instead use the x character, e.g., hx-target-4xx.

Notes

See also