当用户单击任务上的删除按钮时,我试图显示模式。模态有一个带有delete_task_view
的按钮,该按钮用于接收任务的pk。我正在尝试寻找一种方法来传递pk而不为for循环内的每个任务创建模态。
template.html
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header card-header-success">
Create Task
</div>
<div class="card-body">
<form enctype="multipart/form-data" method="POST">
{% csrf_token %}
{{form|crispy}}
<button type="submit" class="btn submit-btn mt-3 mr-2"><i class="fa fa-share"></i> Submit</button>
</form>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header card-header-success">
Tasks
</div>
<div class="card-body">
<table class="table">
<tbody>
<th>Task</th>
<th>Action</th>
{% for task in tasks %}
<tr>
<td>{{task.task}}</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-white btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<button type="submit" rel="tooltip" title="Remove" class="btn btn-white btn-link btn-sm"
data-toggle="modal" data-target="#exampleModalCenter">
<i class="material-icons">close</i>
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Confirm Action</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete this task?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<form method="POST" action="{% url 'tasks:delete_task_view' task.pk %}">
{% csrf_token %}
<a href="#"><button type="button" class="btn btn-primary">Delete</button></a>
</form>
</div>
</div>
</div>
</div>