使用单个模态框处理所有条目编辑时Django模板URL拼接报错如何解决

你遇到的报错根本原因是：Django模板标签是服务端渲染的，JS代码是客户端浏览器运行的。{% url %}这类模板标签在页面返回给用户之前就会在服务端完成解析渲染，而你写在JS模板字符串里的${this.getAttribute("data-id")}是浏览器端才会解析的变量，服务端解析{% url %}的时候会把这个JS变量当成Django语法的一部分，自然无法识别抛出错误。

解决方案1（更简单，推荐）：直接在按钮元素上预存完整编辑URL #

Django渲染页面的时候直接把每个条目对应的完整编辑URL存在按钮的自定义属性里，JS直接读取赋值即可：

修改HTML按钮部分 #

<tr>
  <td class="border-0 size-13 text-gray-dark">
    <button class="btn btn-gray text-gray size-13 edit-modal"  
      data-edit-url="{% url 'internal-users:edit-product' pk=1 %}" 
      data-toggle="modal" data-target="#editModal">
    Edit
    </button>
  </td>
</tr>
<tr>
  <td class="border-0 size-13 text-gray-dark">
    <button class="btn btn-gray text-gray size-13 edit-modal"  
      data-edit-url="{% url 'internal-users:edit-product' pk=2 %}" 
      data-toggle="modal" data-target="#editModal">
    Edit
    </button>
  </td>
</tr>
<!-- 循环渲染的话直接写循环变量即可 -->
<!-- <button data-edit-url="{% url 'internal-users:edit-product' pk=你的循环项.id %}" ...> -->

修改JS代码 #

let edit_buttons = document.querySelectorAll(".edit-modal");
for(var i = 0; i < edit_buttons.length; i++) {
  edit_buttons[i].addEventListener("click", function(e) {
    // 直接读取预存的完整URL赋值给form的action属性
    const editUrl = this.getAttribute("data-edit-url");
    document.querySelector("form").setAttribute("action", editUrl);
  })
}

解决方案2：URL占位符替换 #

如果不想在每个按钮上存URL，可以先渲染一个带占位符的URL模板，JS拿到后替换占位符为实际ID：

提前在模板中定义URL模板 #

// 这段代码要写在Django模板的<script>标签里，才能渲染出正确的占位URL
const EDIT_URL_TPL = "{% url 'internal-users:edit-product' pk=0 %}";

修改JS点击逻辑 #

let edit_buttons = document.querySelectorAll(".edit-modal");
for(var i = 0; i < edit_buttons.length; i++) {
  edit_buttons[i].addEventListener("click", function(e) {
    const objId = this.getAttribute("data-id");
    // 把URL中的占位ID 0 替换为实际的条目ID
    const realEditUrl = EDIT_URL_TPL.replace('/0/', `/${objId}/`);
    document.querySelector("form").setAttribute("action", realEditUrl);
  })
}

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