Почему мой навигатор не обновляется после срабатывания htmx?
У меня есть проект django со списком проектов на левой панели навигации. Я новичок в htmx и использую его для обновления списка проектов после создания нового проекта из формы. Я вижу событие срабатывания htmx, полезная нагрузка выглядит корректно, и целевой элемент div выглядит корректно. Однако обновление не происходит. Я пробовал включать from:body. У меня есть hx-цель в форме, и я генерирую HX-триггер в представлении, но я не уверен, что это правильно.
Вот мой views.py:
А вот моя форма:
{% load i18n %}
<div class="card mt-3">
<div class="card-header">
<h5>{% translate "Create Project" %}</h5>
<button type="button" class="close" aria-label="Close"
onclick="document.getElementById('project-form-container').innerHTML = '';">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="card-body">
<form id="create-project-form" method="post" hx-post="{% url 'projects:project_create' team_slug %}"
hx-target="#project-list2" hx-swap="innerHTML">
{% csrf_token %}
{{ form.as_p }}
<div>
<label for="id_entities_search">{% translate "Search Team Members or Projects:" %}</label>
<input type="text" id="id_entities_search" class="form-control"
placeholder="{% translate 'Start typing to search...' %}">
<ul id="entities_results" class="list-group"></ul>
<div id="selected_entities"></div>
</div>
<button type="submit" class="pg-button-primary">{% translate "Create Project" %}</button>
</form>
</div>
</div>
А вот мой team_nav.html:
{% load i18n %}
{% load team_tags %}
<div class="mt-2">
<a class="pg-button-secondary" hx-get="{% url 'projects:project_create' request.team.slug %}"
hx-target="#project-form-container" hx-swap="innerHTML">
<span class="pg-icon"><i class="fa fa-plus"></i></span>
<span>{% translate "Add Project" %}</span>
</a>
</div>
<div id="project-list2" hx-target="this" hx-trigger="refreshProjectList from:body" hx-swap="innerHTML">
{% include 'projects/project_list.html' %}
</div>
А вот список проектов (project_list.html):
{% load i18n %}
<h3 class="text-2xl py-4">{% translate "Projects" %}</h3>
<ul class="list-group">
{% for project in projects %}
<li class="list-group-item">
<a href="{% url 'projects:project_detail' project.project_id %}">{{ project.title }}</a>
</li>
{% empty %}
<li class="list-group-item">{% translate "No projects found." %}</li>
{% endfor %}
</ul>
Я попробовал изменить hx-swap и вижу, что событие htmx срабатывает с помощью js alert на base.html. И я вижу, что предварительный просмотр html выглядит корректно. Проект создается, но навигационная панель не обновляется.
Вставьте ниже в тег формы.
hx-push-url = "true"
Кроме того, может быть проблема с кэшем браузера. Я также столкнулся с этой проблемой. После ручного обновления браузера я смог увидеть выгруженные компоненты. Затем я использовал приведенный ниже код в файле base.html.
<script>
document.addEventListener('htmx:afterRequest', function(evt) {
location.reload();
});
</script>