Почему мой навигатор не обновляется после срабатывания 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">&times;</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>
Вернуться на верх