如何在Django中使用Bootstrap Modal来删除基于类的视图中的对象?

7nbnzgx9  于 2023-05-08  发布在  Go
关注(0)|答案(3)|浏览(145)

我在Django中使用CBV来删除项目。我想做的是,当我点击删除按钮时,而不是将我重定向到post_confirm_delete视图,我想弹出一个模态,在其中显示用户是否要删除对象的问题,以及确认按钮和删除对象的按钮。我在HTML中试过:

<button class="btn" data-toggle="modal" data-target="#fm-modal-grid">Delete</button>
<div class="modal fade" id="fm-modal-grid" tabindex="-1"
     role="dialog" aria-labelledBy="fm-modal-grid"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" aria-label="Cerrar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12 col-sm-6">
                            <p>Are you sure you want to delte {{post.title}}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <a href="{% url 'blog:post_remove' pk=post.pk %}" class="btn">Delete</a>
                <button class="btn btn-primary" data-dismiss="modal">Cancelar</button>

            </div>
        </div>
    </div>
</div>

我在视图类的delte CBV中有这个:

class PostDeleteView(DeleteView, LoginRequiredMixin):
    model = Post
    success_url = reverse_lazy('post_list')
    template_name = 'blog/post_list.html'

URL文件看起来像这样:

urlpatterns = [
    path('',views.PostListView.as_view(),name='post_list'),
    path('article/', views.ArticleView.as_view(), name="article"),
    path('newpost/', views.CreatPostView.as_view(), name="new_post"),
    path('post/<int:pk>', views.PostDetailView.as_view(), name='post_detail'),
    path('post/<int:pk>/edit/', views.PostUpdateView.as_view(), name='post_edit'),
    path('post/<int:pk>/remove/', views.PostDeleteView.as_view(), name='post_remove'),
]

当我按下模式中的Delete按钮时,它会将我重定向到我的索引,但不会删除对象。我该怎么做?

ymdaylpp

ymdaylpp1#

被医生发现了
只有当请求方法是POST时,给定的对象才会被删除。
因此,链接是它不起作用的原因。我通过将用于delete的模式按钮放在一个表单中来解决这个问题,如下所示:

<form action="{% url 'blog:post_remove' pk=post.pk %}" method="POST">
       {% csrf_token %}
       <button class="btn">Delete</button>
</form>
ibps3vxo

ibps3vxo2#

实际上,你需要把你的按钮放在一个表单中来进行POST。
另一种解决方案是使用一些JS触发模态,然后当您确认删除时,您可以进行POST类型的 AJAX 调用。因此,您没有义务将按钮放在表单中。

$.confirm({
        title: 'Deletion pop-up',
        content: 'Do you want to proceed ?',
        buttons: {
            confirm: function () {
              $.ajax({...}),
                success: function(response){...},
            }
        }
)};
tgabmvqs

tgabmvqs3#

使用Django DeleteView和Bootstrap Modal删除对象

我正在添加Bootstrap 5的解决方案

<!-- Button that opens a modal -->
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delete_item">
    Delete
</button>

<!-- Modal -->
<div class="modal fade" id="delete_item" data-bs-backdrop="static"
     data-bs-keyboard="false" tabindex="-1" aria-labelledby="delete_item_label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="delete_item_label">Delete {{ object }}?</h5>
      </div>

      <form action="{% url 'object_delete_url' object.id %}" method="post">
          {% csrf_token %}

          <div class="modal-body">
            <p>Are you sure you want to delete "{{ object }}"?</p>
            {{ form }}
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-danger" value="Confirm">Delete</button>
          </div>
      </form>

    </div>
  </div>
</div>

相关问题