HTMX не может найти элемент на сайте
Я пытаюсь создать веб-приложение с помощью django и htmx. Одна из функциональных возможностей htmx заключается в том, что я хочу динамически вставлять строки в таблицу. Для этого у меня есть...
файл base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap 5-->
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<script src="{% static 'js/bootstrap.min.js' %}" defer></script>
<!-- HTMX -->
<script src="{% static 'js/htmx.min.js' %}" defer></script>
<!-- Favicon -->
<link rel="shortcut icon" type="image/svg" href="{% static 'favicon.svg' %}"/>
<title>Document</title>
</head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
{% include 'navbar.html' %}
<div class="container-fluid">
{% if messages %}
{% for message in messages %}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole! {{ message }}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
{% block content %}
{% endblock %}
</div>
</body>
</html>
файл "add-periods.html":
и некоторые частицы. Я показываю здесь только партиклы, относящиеся к периоду nursinghome, но остальные точно такие же, за исключением имен переменных: nursinghome-tbody.html:
{% for nursinghome_period in patient.nursinghome_periods.all %}
{% include 'partials/nursinghome-period.html' %}
{% endfor %}
{% include 'partials/nursinghomeform.html' %}
nursinghome-period.html:
{% if not nursinghome_period.start_date and not nursinghome_period.end_date %}
<tr class="d-flex">
<td class="col-8" colspan="2">Dauerhafter Heimaufenthalt</td>
<td class="col-2"></td>
<td class="col-2">
<button class="btn btn-sm btn-danger"
hx-get="{% url 'del-nursinghome-period' nursinghome_period.id %}"
hx-target="closest tr"
>
Löschen
</button>
</td>
</tr>
{% else %}
<tr class="d-flex">
<td class="col-4">{{ nursinghome_period.start_date|date:"d.m.Y" }}</td>
<td class="col-4">{{ nursinghome_period.end_date|date:"d.m.Y" }}</td>
<td class="col-2"></td>
<td class="col-2">
<button class="btn btn-sm btn-danger"
hx-get="{% url 'del-nursinghome-period' nursinghome_period.id %}"
hx-target="closest tr"
>
Löschen
</button>
</td>
</tr>
{% endif %}
и nursinghomeform.html:
{% load widget_tweaks %}
<tr class="table-light d-flex">
<form
hx-post="{% url 'add-nursinghome-period' patient.id %}"
hx-target="closest tbody"
hx-ext="debug"
>
<div class="container">
<td class="col col-4">{% render_field nursinghomeform.start_date type='date' id='start-date' class+='form-control' %}</td>
<td class="col col-4">{% render_field nursinghomeform.end_date type='date' id='end-date' class+='form-control' %}</td>
<td class="col col-2 d-flex align-items-center justify-content-center">
<button class="btn btn-sm btn-success" type="submit">
Zeitraum hinzufügen
</button>
</td>
<td class="col col-2 d-flex align-items-center justify-content-center">
<button type="button" class="btn btn-sm btn-warning"
hx-target="closest tr"
hx-swap="outerHTML"
hx-get="{% url 'add-nursinghome-period' patient.id %}"
>
Abbrechen
</button>
</td>
</div>
</tr>
</form>
и вот соответствующее представление django:
def add_nursinghome_period(request, patient_id):
patient = Patient.objects.get(id=patient_id)
if request.method == "POST":
form = NursingHomeForm(request.POST or None)
if form.is_valid():
nursinghome_period = form.save(commit=False)
nursinghome_period.patient = patient
nursinghome_period.save()
nursinghomeform = NursingHomeForm()
context = {"patient": patient, "nursinghomeform": nursinghomeform}
return render(request, "partials/nursinghome-tbody.html", context)
context = {"nursinghomeform": NursingHomeForm, "patient": patient}
return render(request, "partials/nursinghomeform.html", context)
Ожидаемое поведение:
- При отображении сайта в таблице отображаются все уже введенные периоды nursinghome (работает)
- Когда я нажимаю на кнопку удаления любого из них, период удаляется из базы данных, а строка удаляется из таблицы через htmx (работает)
- Когда я ввожу числа в форму внизу таблицы и ошибаюсь, нажатие на кнопку отмены удаляет эту форму и заменяет ее новой через htmx (не работает)
- При отправке формы период сохраняется в базе данных и вставляется новый tbody, содержащий все периоды, форму и прочее (не работает)
Что я пробовал:
Я использовал браузерные devtools. Я вижу в chrome и firefox devtools, что когда я нажимаю на кнопку, отправляется новая форма / tbody. Но она не вставляется в DOM, вместо этого htmx сообщает мне, что не нашел следующего tbody.
Когда я ввожу htmx.logAll() в консоль, чтобы понять, что происходит, я получаю сообщение об ошибке, что htmx не определен (WTF? Он есть и частично работает, как он может быть не определен?)
Когда я пытаюсь использовать отладочное расширение - тот же результат, htmx не определен.
Я просмотрел предыдущую версию кода (когда htmx работал как надо) и не нашел никаких различий в html между рабочей и нерабочей версией... Итак, еще раз: WTF?!
Я ищу ошибку уже два дня, поэтому немного расстраиваюсь. Есть ли у кого-нибудь подсказка, почему это не работает так, как ожидалось, почему это внезапно перестало работать и что мне нужно изменить, чтобы это заработало?
Чуть не забыл... Нет, я не обновлял HTMX до версии 2, так что это не может быть проблемой.
Приветствия Андре