Django htmx не нацеливается на назначенный элемент
У меня есть шаблон django-tables2, который я модифицировал, чтобы присвоить уникальный идентификатор строки каждому ряду. Я пытаюсь добавить кнопку, которая позволит пользователю удалить данный ряд по щелчку мыши. Я использую htmx для инициирования запроса на удаление. У меня также есть кнопка редактирования с поддержкой htmx, которая работает как положено в отношении модификаций на стороне пользователя и обновления DOM. Поведение кнопки удаления соответствует ожиданиям на стороне сервера, но подмена, похоже, влияет только на кнопку, а не на тег. После нажатия на кнопку удаления запись удаляется из базы данных, но в DOM исчезает только кнопка, а не <tr>
. Я не буду приводить views.py, так как он достаточно прост в том, что извлекает соответствующую запись, выполняет удаление и возвращает пустой HTTPResponse.
Я пробовал добавить hx-цель с помощью hx-swap, но это деактивирует любую возможность вызова htmx на кнопке. Я также пробовал поместить обертку <div>
вокруг <tr>
и нацелить ее с помощью oob-свапа, но безуспешно.
Вот шаблон table.tbody с кнопками редактирования и удаления:
{% extends 'tablestyle.html' %}
{% load humanize %}
{% block table.tbody %}
<tbody {{ table.attrs.tbody.as_html }}>
{% for row in table.paginated_rows %}
{% block table.tbody.row %}
<tr id="emp_hx_row_{{ row.record.pk }}" {{ row.attrs.as_html }} height="70px">
{% for column, cell in row.items %}
<td {{ column.attrs.td.as_html }} class="gls-text-middle">
{{ cell }}
</td>
{% endfor %}
<td class="gls-flex gls-align-middle">
<!-- edit button -->
<div class="gls-width-auto">
<button class="gls-flex gls-flex-center gls-flex-middle" hx-get="{% url 'employment_history_edit' row.record.pk %}" gls-tooltip="title: Edit" title="" aria-expanded="false" tabindex="0">
<div class="fa fa-edit fa-xs" style="color:#000000"></div>
</button>
</div>
<!-- delete button -->
<div class="gls-width-auto gls-margin-small-left">
<button class="gls-flex gls-flex-center gls-flex-middle" gls-tooltip="title: Delete" hx-delete="{% url 'employment_history_delete' row.record.pk %}" hx-confirm="Are you sure you wish to delete?" hx-swap-oob="#emp_hx_row_{{ row.record.pk }}">
<div class="fa fa-trash fa-xs" style="color:#000000"></div>
</button>
</div>
</td>
</tr>
{% endblock table.tbody.row %}
{% empty %}
{% if table.empty_text %}
{% block table.tbody.empty_text %}
<tr><td colspan="{{ table.columns|length }}">{{ table.empty_text }}</td></tr>
{% endblock table.tbody.empty_text %}
{% endif %}
{% endfor %}
</tbody>
{% endblock %}
Вы должны быть в состоянии удалить эту строку, используя относительное нацеливание:
<button
class="gls-flex gls-flex-center gls-flex-middle"
gls-tooltip="title: Delete"
hx-delete="{% url 'employment_history_delete' row.record.pk %}"
hx-confirm="Are you sure you wish to delete?"
hx-target="closest tr"
hx-swap="outerHTML swap:1s"
>
<div class="fa fa-trash fa-xs" style="color:#000000"></div>
</button>
Вы должны вернуть ответ 200 с пустым содержимым, чтобы побудить htmx удалить целевое содержимое и не заменять его ничем.
Чтобы избежать дублирования атрибутов, можно обернуть таблицу формой и перенести все hx-
attr в тег формы (кроме hx-delete
).
Вы также можете посмотреть пример кода в документации htmx для получения более подробной информации: