在Django中向Bootstrap模态框传递值

Question

我有一个漂亮的模态框，每当用户想要删除数据时就会显示一个删除确认对话框。问题是我的许多视图在模板中呈现元素列表，每个元素都有其详细信息以及一个小小的红色删除按钮。当然，在django中，视图将元素列表传递给模板，例如客户列表，并以以下表格形式呈现：

<table class="table table-striped">  
    <thead>  
      <tr>
        <th>Email</th>
      </tr>  
    </thead>  
    <tbody>
      {% for client in clientes %}
        <tr>  
          <td>{{ client.email }}</td>
          <td>
            <div class="btn-group">
              <!-- Delete button -->
              <a href="#myModal" class="btn btn-danger btn-mini" title="Eliminar">
                <i class="icon-trash icon-white"></i></a>
            </div>
          </td>
        </tr> 
      {% endfor %}
    </tbody>  

每当用户按下删除按钮，我希望出现一个Bootstrap模态框来确认他正在删除某些数据。目前，我已经成功让模态框出现并删除了用户，但不是正确的用户，模态框似乎只获取或尝试删除列表中的第一个用户。你可以通过以下链接检查我的完整模板和模态框：FULL HTML。

最终，我的问题与将正确的{{ client }} 传递到模态框有关，而不是客户列表中的第一个客户，我想这是由于在for循环中首先声明了模态框，然后不再声明。例如，表格中有3个客户：

[e-mail]         detele-button
[e-mail]         detele-button
[e-mail]         detele-button

无论我按下哪个客户端的删除按钮，它总是显示带有客户端1数据的模态窗口，并且如果按确认删除，则实际上会将其擦除。

谢谢。

编辑1：href不正确。

- PepperoniPizza

---

你是否检查了生成的HTML，看看在<a href="{% url delete_client client.id %}"中生成的URL对于每个客户端是否都不同？ - keithxm23

是的，抱歉，那一行不正确，只是举个例子，我已经编辑过了，完整的HTML显示了我的确切HTML。谢谢。 - PepperoniPizza

不，列表中每个客户端都显示正确，但模态框只有第一个客户端的数据。 - PepperoniPizza

请将生成的HTML和Javascript代码粘贴到jsfiddle中。不要包含Django模板标签的代码。 - keithxm23

如果您解决了问题，请将其作为答案并接受它。不要在标题中添加[solved]。 - Bart

Answer 1

找到了答案，实际上要感谢keithxm23。

检查生成的HTML有助于我正确实现这一点。实际上，每个模态框都被正确地生成了，问题在于每个模态框的id属性都设置为相同，即id="myModal"，而删除按钮则有href="#myModal"。解决方案是将模态框id属性设置为整个文档中唯一的值，我通过设置模态框id="{{client.pk}}"和按钮href="#{{client.pk}}"来实现了这一点。

- PepperoniPizza

---

我也遇到了同样的问题。但是这个解决方案对我不起作用。 - Prachi Sharma

Answer 2

@Prachi Sharma

可能是因为您正在使用整数，在CSS标识符中不能以数字、两个连字符或连字符后跟数字开头。您可以尝试使用id="字母或单词{{client.pk}}" href="#字母或单词{{client.pk}}"

- Tinashe Nyakutetepa