Как использовать Bootstrap Modal для удаления объекта с использованием представлений классов на основе Django? - PullRequest
Новая
       11

Как использовать Bootstrap Modal для удаления объекта с использованием представлений классов на основе Django?

2 голосов
/ 01 апреля 2019

Я использую CBV в Django для удаления предметов.То, что я хочу сделать, это когда я нажимаю кнопку, чтобы удалить, вместо перенаправления меня в представление 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'),
]

Когда я нажимаю кнопку Удалить внутри модального окна, он перенаправляет меня на мой индекс, но не удаляет объект.Как я могу это сделать?

Ответы [ 2 ]

2 голосов
/ 01 апреля 2019

По документам

Данный объект будет удален, только если метод запроса POST.

Таким образом, ссылка не работает,Я решил это, поместив модальную кнопку для удаления внутри формы, как это: 

<form action="{% url 'blog:post_remove' pk=post.pk %}" method="POST">
       {% csrf_token %}
       <button class="btn">Delete</button>
</form>
0 голосов
/ 01 апреля 2019

На самом деле вам нужно поместить свою кнопку в форму, чтобы сделать POST.

Другим решением является запуск модального режима с использованием некоторого JS, а затем, когда вы подтвердите удаление, вы можете сделать Ajax-вызов типа POST. Таким образом, вы не обязаны помещать кнопку внутри формы. 

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