+++ title = "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: * A CSS query selector of the element to target. * `this` which indicates that the element that the `hx-target` attribute is on is the target. * `closest ` which will find the closest parent ancestor that matches the given CSS selector (e.g. `closest tr` will target the closest table row to the element). * `find ` which will find the first child descendant element that matches the given CSS selector. * `next ` which will scan the DOM forward for the first element that matches the given CSS selector. (e.g. `next .error` will target the closest following sibling element with `error` class) * `previous ` which will scan the DOM backwards for the first element that matches the given CSS selector. (e.g `previous .error` will target the closest previous sibling with `error` class) ## 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](#usage). ```HTML ... ``` 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](https://blog.wesleyac.com/posts/why-not-javascript-cdn). 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 `