CODEWITHSUNDEEP
htmx
redOctober13
redOctober13

Reputation: 3974

HTMX: Why isn't the default target working?

According to the HTMX documentation, the default target for an Ajax response is the innerHTML of the element making the call. Yet in my sample code below, where the span makes a request to /books/count, the hx-target on the form is being used instead of the response being loaded into the empty span. Is this correct behavior?

Do you always have to do hx-target=this if there's another hx-target on any parent element? That seems to nullify the whole idea of a "default target."

{% extends 'base.html' %}

{% block content %}
    <h1>Book Recommendations</h1>
    <form hx-post="/book" hx-swap="beforeend" hx-target="#new-book" class="mb-3">
        <span hx-get="/books/count" hx-trigger="load"></span>
    </form>

    <div id="new-book">
        <p>a table goes here</p>
        <!-- response from /books/count is going here -->
    </div>
{% endblock %}

Upvotes: 0

Views: 845

Answers (1)

Quentin
Quentin

Reputation: 943100

See inheritance:

Most attributes in htmx are inherited: they apply to the element they are on as well as any children elements. This allows you to “hoist” attributes up the DOM to avoid code duplication.

and

Automatic inheritance can be disabled using the hx-disinherit attribute.

Upvotes: 1

Related Questions