我正在做一个电子商务项目,并且遇到了一个问题。我正在使用 Bootstrap 和 Django。对于这个长问题我深表歉意
我基本上有一个循环遍历数据库中的产品列表并列出它们。这是一张 table 。每一行都是一个新产品,单元格是有关该产品的特定信息。最后一个单元格创建一个小模式来编辑项目的当前信息。信息通过循环正确传递,但在 Chrome 的渲染中,我看到所有产品中列出的产品一的信息。
表格如下所示:
这就是我生成表的循环的样子:
<tbody>
{% for product in products %}
<tr>
<td>
<img src="{% static product.main_picture %}" style="width: 100px;">
</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.inventory_count}}</td>
<td>{{product.sold_count}}</td>
<td>
<!-- Button trigger edit modal -->
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editModal">Edit</button>
<!-- Edit product Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit the product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Form to edit product -->
<form method='post' action='/dashboard/products/update'>
{% csrf_token %}
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="product_name" value="{{product.name}}">
</div>
<div class="form-group">
<label>Picture:</label>
<input type="text" class="form-control-file" name="product_picture" value="{{product.main_picture}}">
</div>
<div class="form-group">
<label>Description:</label>
<input type="text" class="form-control" name="product_desc" value="{{product.description}}">
</div>
<div class="form-group">
<label>Inventory Count</label>
<input type="number" class="form-control" name="inventory_count" value="{{product.inventory_count}}">
</div>
<div class="form-group">
<label>Price</label>
<input type="number" class="form-control" name="price" value="{{product.price}}">
</div>
<input type="submit" value="Save Changes" class="btn btn-primary float-right">
</form>
<!-- End of form -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
这就是 Chrome 的源代码:
https://gist.github.com/amandademetrio/3f1fdc68609c9c0c3546352d3b697286
它在源代码上完美运行,但以下是我单击每个产品时显示的内容:
每个产品都会显示第一个产品的信息。
很抱歉问了这么长的问题。有没有人遇到类似的问题并可以提供帮助? 谢谢!
最佳答案
您对所有产品行重复使用相同的 ID (editModal
),这是不允许的。当您单击 Edit
按钮(使用 data-target="#editModal"
)时,Javascript 会查找 id 为 editModal
的元素,并使用它找到的第一个。
将您的编辑
按钮代码更改为
<button type="button" class="btn btn-secondary btn-sm"
data-toggle="modal" data-target="#editModal-{{ forloop.counter }}">Edit</button>
并修改模态 div
以匹配相同的 id
:
<div class="modal fade" id="editModal-{{ forloop.counter }}" tabindex="-1" role="dialog">
如果你现在查看生成的源代码,你会看到有一些唯一的 id,例如 editModal-0
、editModal-1
、.. .
每行。
关于python - Modal Bootstrap - 源代码与 Chrome 呈现的信息不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51529286/