使用 HTMX 创建新实体时动态更新表

如何解决使用 HTMX 创建新实体时动态更新表

在一些简单的 HTMX 任务中 recent success 之后，我想通过一个动态更新表的模式字段来扩展 adamchainz django-htmx example。我不确定我是否在 render ... 中返回了正确的内容，但我的问题是，该表没有更新。只有当我点击重新加载时。

查看：

class CreateProductView(TemplateView):
    template_name = "app/product_create.html"
    form_class = OrderForm

    def get(self,request,*args,**kwargs):
        return render(request,self.template_name,{'form': self.form_class()})

    def post(self,request):
        Product.objects.create(name = request.POST["name"],price = request.POST["price"])
        part_template = "app/partial-rendering.html"
        return render(request,part_template,{"base_template": "app/_partial.html"})

urls.py:

path("create/",views.CreateProductView.as_view(),name = 'create'),

这是我的index.html，里面有桌子：

<div class="..."><button class="btn btn-primary" 
                         id="showButton"
                         hx-get="/create" 
                         hx-target="#modal-create">create</button</div>

<main role="main" id="main">{% include "app/orders_table.html" %}</main>
<div id="modal-create"></div>

我也有一个 partial-rendering.html：

{% extends base_template %}

{% block main %}
     {% include "app/product_table.html" %}
{% endblock %}

和一个 _partial.html：

<main id="main">
    {% block main %}{% endblock %}
</main>

我不会在这里发布整个 product_table.html，我想它很简单......主要是：

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>product name</th>
            <th>price</th>
        </tr>
    </thead>
    <tbody>
        {% for product in page.object_list %}
            <tr>
                <td>{{ product.name}}</td>
                <td>{{ product.price }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>

表单中的数据通过JS收集并使用AJAX发送到django。我没有使用普通表单提交，因为我想避免页面重新加载（我知道这可以解决这个问题）。

我确实尝试将上面提到的例子放在一起。除了动态页面更新之外，一切都运行良好！