0

我一直在使用 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 %}

经过一天的玩耍和拉扯我的头发……一切都按我的意愿工作……我只需要弄清楚如果有任何变化，如何合并动态页面加载，以便重新加载整个页面……这样记录根据我的号码字段排序...

提前感谢您的任何想法或建议。

4

2 回答 2

0

如果您需要这个，我在发布后必须更新页面的两个/多个部分时遇到问题。

我设法通过trigger_client_event解决它

感谢这个问题：如何从 JavaScript 手动触发元素的 hx-get 事件

HTMX 摇滚！

于 2022-02-16T22:50:55.670 回答
0

所以感谢 Facebook 上的一个好心人……我把这个 Javascript 添加到我的代码中，它可以工作。

$(document).on("click", ".yourclass", function(){
  location.reload();      
});
于 2022-02-16T20:50:53.243 回答