Как запустить обновление страницы HTMX после обновления пользователем любой части страницы?

Я работал с HTMX и это довольно круто по сравнению с ужасными наборами форм и Javascript. У меня все работает....Моя единственная проблема в том, что когда пользователь обновляет форму в любом месте... вам приходится вручную обновлять страницу, чтобы сбросить список дел. Моя проблема идентична этой...https://stackoverflow.com/questions/66664407/dynamically-update-table-when-creating-new-enty-using-htmx но нет никакого решения.....

Вот краткий обзор моего кода...

Мое мнение...

def create_to_do(request):
    user = User.objects.get(id=request.user.id)
    to_dos = NewToDo.objects.filter(created_by=user)    
    form = ToDoForm(request.POST or None)

if request.method == "POST":

    if form.is_valid():
        to_do = form.save(commit=False)
        to_do.created_by = user
        to_do.creation_date = timezone.now()
        to_do.save()
        return redirect("MyToDoList:detail-to-do", pk=to_do.id)
    else:
        return render(request, "partials/to_do_form.html", {
            "form":form
        })

context = {
    "form": form,
    "user": user,
  "to_dos": to_dos,
}

return render(request, "create_to_do.html", context)

Частичный просмотр деталей....

        <button class="button35" hx-get="{% url 'MyToDoList:update-to-do' to_do.id %}" hx-swap="outerHTML">
            Update
        </button>
        <button class="button34" hx-post="{% url 'MyToDoList:delete-to-do' to_do.id %}" hx-swap="outerHTML">
            Delete
        </button>
 </div>

Частичная форма todo....

<div hx-target="this" hx-swap="outerHTML" class="">
  <form method="POST">
    {% csrf_token %}
      {% if to_do %}
 
                <button class="button35" hx-post="{% url 'MyToDoList:update-to-do' to_do.id %}">
                  Save
                </button>
                <button class="button34" hx-get="{% url 'MyToDoList:detail-to-do' to_do.id %}">
                  Cancel
                </button>   
          </div>
      {% else %}
                 <button class="button35" hx-post=".">
                  Save
                </button>
             </div>
      {% endif %}
  </form>
</div>

Моя главная форма для создания html...

<button class="button36" hx-get="{% url 'MyToDoList:create-to-do-form' %}" hx-swap="beforeend" hx-target="#bookforms">Add Form</button>

<div id="bookforms" class=""></div>

<div class="">

{% if to_dos %}

  {% for to_do in to_dos %}

    {% include "partials/to_do_detail.html" %}

  {% endfor %}

{% endif %}

После целого дня игры и вырывания волос... все работает так, как я хочу... Мне просто нужно выяснить, как включить динамическую загрузку страницы, если что-то изменится, чтобы вся страница была перезагружена...., чтобы записи сортировались в соответствии с моим числовым полем...

Заранее спасибо за любые мысли и предложения.

Благодаря доброй душе на Facebook.... я добавил этот Javascript в свой код и он работает.

$(document).on("click", ".yourclass", function(){
  location.reload();      
});

На случай, если вам это понадобится, у меня была проблема, когда я должен обновить две/множество частей страницы после публикации.

Мне удалось решить это с помощью trigger_client_event

Благодаря этому вопросу: Как вручную вызвать событие hx-get элемента из JavaScript

HTMX rocks!

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