使用HTMX实现Django内联编辑时出现targetError问题求助

核心问题分析 #

1. 视图函数POST分支返回错误：editProject视图中POST请求的返回模板路径'tool/{project.id}'完全无效，会导致HTMX接收到错误响应（甚至模板不存在的报错），无法生成用于替换的目标DOM结构。
2. 表单hx-target定位失效：原h1被表单替换后，表单上下文里没有closest h1，#projectName也已被替换为表单，因此无法找到目标元素触发targetError。

修复步骤 #

1. 修正视图函数（view.py） #

先创建用于渲染项目标题的模板片段tool/partials/projectName.html，内容为初始的可编辑标题结构：

<h1 id="projectName"
    hx-get="{% url 'tool:editProject' pk=project.pk%}"
    hx-target="this"
    hx-swap="outerHTML">
    {{project.name}}
</h1>

修改editProject视图的POST分支，返回该模板：

def editProject(request,pk):
    project=Project.objects.get(id=pk)
    if request.method == 'POST':
        project.name=request.POST.get('name','')
        project.save()
        # 返回渲染后的标题片段，替换表单
        return render(request,'tool/partials/projectName.html',{'project':project})
    return render(request,'tool/partials/editProject.html',{'project':project})

2. 修正表单的hx-target（editProject.html） #

将表单的hx-target改为this，让返回的标题片段直接替换整个表单，避免找不到目标元素的问题；同时用Django内置的{% csrf_token %}替代hx-headers的csrf传递方式，更可靠：

<form
    hx-post="{% url 'tool:editProject' pk=project.pk%}"
    hx-target="this"
    hx-swap="outerHTML"
    class="flex"
>
    {% csrf_token %}
    <input type="text" name="name" value="{{project.name}}" autofocus>
    <button class="text-sky-600 hover:text-sky-900">保存</button>
</form>

3. 验证逻辑 #

• 点击标题时，HTMX用表单替换h1；
• 提交表单时，视图更新项目名称，返回新的h1片段，HTMX用该片段替换表单；
• 整个流程不会出现targetError，完成内联编辑闭环。

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