使用Django+HTMX实现可编辑行时POST请求未触发的问题

问题核心原因 #

1. HTML表格结构无效：edit_link_form.html 最外层为<td>，但替换目标是<tr>元素，导致渲染后表格DOM结构混乱，浏览器无法正确解析表单，HTMX无法绑定提交事件。
2. 视图返回逻辑错误：LinkUpdateView 在表单验证成功后重定向到更新页面，而非返回更新后的行视图，不符合HTMX无刷新更新的预期。
3. Cancel按钮无交互逻辑：未绑定HTMX事件，无法取消编辑状态。

修复步骤 #

1. 修正表单模板结构 (edit_link_form.html) #

将表单包裹在完整的<tr>中，确保表格列数与原行一致（原行有6列，合并前4列用于显示表单字段）：

<tr id="link_list_{{object.pk}}">
  <form hx-post="{% url 'link:link_update' pk=object.pk %}" hx-target="#link_list_{{object.pk}}" hx-swap="outerHTML">
    {% csrf_token %}
    {% load crispy_forms_tags %}
    <!-- 合并前4列用于展示表单字段 -->
    <td colspan="4">
      <div class="form-row">
        {% for field in form %}
          <div class="form-group col-md-12">
            {{ field|as_crispy_field }}
          </div>
        {% endfor %}
      </div>
    </td>
    <td>
      <button type="submit" class="btn">Submit</button>
    </td>
    <td>
      <!-- 绑定Cancel按钮的HTMX事件，点击后恢复原行 -->
      <button class="btn btn-primary" type="button" 
              hx-get="{% url 'link:get_row_view' pk=object.pk %}"
              hx-target="#link_list_{{object.pk}}" 
              hx-swap="outerHTML">
        Cancel
      </button>
    </td>
  </form>
</tr>

2. 调整视图逻辑 (views.py) #

• 表单验证成功时，直接返回更新后的行视图，而非重定向
• 确保get_row_view传入tags_by_shortcode上下文变量（与列表页逻辑一致）

def get_row_view(request, pk):
    link = LinkUrl.objects.get(pk=pk)
    # 此处需复用列表页中生成tags_by_shortcode的逻辑，示例如下：
    tags_by_shortcode = {}
    # 假设LinkUrl与Tag通过中间表关联，替换为实际关联逻辑
    for tag in link.tags.all():
        if link.shortcode not in tags_by_shortcode:
            tags_by_shortcode[link.shortcode] = []
        tags_by_shortcode[link.shortcode].append(tag)
    
    context = dict(
        link=link,
        tags_by_shortcode=tags_by_shortcode
    )
    return render(request, 'link/row.html', context)


class LinkUpdateView(UpdateView):
    model = LinkUrl
    form_class = LinkModelForm
    template_name = 'link/edit_link_form.html'

    def form_valid(self, form):
        # 保存表单数据
        self.object = form.save()
        # 返回更新后的行视图
        return get_row_view(self.request, self.object.pk)

    def form_invalid(self, form):
        # 验证失败时返回带错误的表单
        return self.render_to_response(self.get_context_data(form=form))

3. 验证修复效果 #

• 点击编辑按钮，表单正确替换原行
• 修改字段后点击Submit，表单提交POST请求，视图更新数据并返回原行视图，页面无刷新更新
• 点击Cancel按钮，恢复原行显示

内容的提问来源于stack exchange，提问作者Hilal