Htmx: hx-target-error не работает, когда hx-target определен (django python)

Я использую расширение htmx "response-targets" через "hx-ext" в проекте python django.

Проблема

"hx-target-error" не будет работать, если "hx-target" также определен, но будет работать, если это единственная target.

Окружающая среда

htmx 1.9.10, response-targets 1.9.10, python 3.12, django 5.0.1

Пример html:

<div hx-ext="response-targets">
    <button
        hx-get={% ur "app name:endpoint" %}
        hx-target-error="#id-fail"
        hx-target="#id-success"
        type="submit"
     >
         Press Me!
     </button>
</div>

hx-цель

Пробовал с различными другими типами целей, такими как "next td", "next span" и т.д. Все они дают значения "request.htmx.target" в конечной точке, определенной в views.py.

hx-target-error

Также пробовали различные альтернативы, поддерживаемые в response-targets, такие как "hx-target-*", "hx-target-404" и т.д. без изменений в результатах.

Я проверил, что "response-targets" установлен правильно и используется корректно, потому что когда "hx-target" удален из "кнопки", то "hx-target-error" работает.

Генерация ошибок в файле views.ph

@login_required
def endpoint(request)
    return HttpResponseNotFound("Not found 404")

Журналы

Bad Request: /testbed/endpoint/
127.0.0.1 - - [27/Feb/2024 19:53:51] "GET /testbed/get-error-400/ HTTP/1.1" 400

ответы-цели расширения

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

Решено: Решение заключается в перемещении атрибута "hx-ext" <div hx-ext="response-targets"> на более высокий уровень, чем все элементы DOM, на которые ссылаются "hx-target" или "hx-target-error".

В моем случае "hx-target-error" указывал на div 'id' вне div, содержащего "hx-ext".

Спасибо @guigui42 за предложение этого решения

Пример неправильного использования: 

<tr>
    <td>
        <div hx-ext="response-targets">
            <button
                hx-get={% url "testbed:rebound" %}
                hx-headers='{"custom": "{{ test.id }}"}'
                hx-target-error="#GET-{{ test.id }}-fail"
                hx-target="#GET-{{ test.id }}-ok"
                class="btn btn-sm btn-primary testbed-btn"
            >
                GET {{ test.msg }}
            </button>
        </div>
    </td>
    <td>
        <span id="GET-{{ test.id }}-ok" />
        <span class="text-danger" id="GET-{{ test.id }}-fail" />
    </td>
</tr>

Пример правильного использования:

<tr hx-ext="response-targets">
    <td>
        <button
            hx-get={% url "testbed:rebound" %}
            hx-headers='{"custom": "{{ test.id }}"}'
            hx-target-error="#GET-{{ test.id }}-fail"
            hx-target="#GET-{{ test.id }}-ok"
            class="btn btn-sm btn-primary testbed-btn"
        >
            GET {{ test.msg }}
        </button>
    </td>
    <td>
        <span id="GET-{{ test.id }}-ok" />
        <span class="text-danger" id="GET-{{ test.id }}-fail" />
    </td>
</tr>
Вернуться на верх