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 для получения более подробной информации:

https://htmx.org/examples/delete-row/

Вернуться на верх