liveBook · Manning

Hx-target attribute

As explained in Quarkus in Action

The hx-target attribute identifies the HTML element whose contents HTMX replaces with a response.

Use `hx-target` to choose which element an HTMX response updates. Its value can identify an element by ID, such as `#greeting`. This lets a button or form update one part of a page without custom JavaScript. section 6.2.3

Listing 6.9 A simple example of HTMX usage
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<button hx-get="/click" hx-swap="innerHTML" hx-target="#greeting">
    Greet me
</button>
<div id="greeting">
</div>

The button sends a GET request to `/click`; `hx-target="#greeting"` directs the response to the div, and `hx-swap="innerHTML"` replaces its contents. section 6.2.3

In a reservation UI, an availability form targets `#availability` when dates change. A car’s reservation form instead targets `#reservations` after posting to `/reserve`. Separate Qute templates supply the HTML for these updates. section 6.2.3

How Quarkus in Action covers it

How deep it goes
Shows ID-based targeting in working markup and forms; does not elaborate other target expressions.
Examples
Uses a greeting button, an availability search form, and a car reservation form.
What it assumes
Assumes familiarity with HTML elements and IDs while introducing HTMX’s declarative request behavior.
What you can do after
Apply it via HTMX to update a chosen page region from a backend response.
How it connects
Connects HTMX requests and swaps with Qute templates and REST endpoints.

Also explained in

Compare how 2 books explain hx-target attribute →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Quarkus in Action. The section links point to the parts of the book it draws on.