Как создать всплывающее окно подтверждения удаления в Django с помощью Bootstrap4 Modal

Question

Мой views.py файл выглядит следующим образом.

def deleteOrder(request, pk):
    order = Order.objects.get(id=pk)

    if request.method=="POST":
        order.delete()
        return redirect('/')
    context = {"item":order}

    return render(request, 'accounts/delete.html', context)

Мой delete.html файл это. Если есть способ избавиться от него или использовать часть его кода во всплывающем окне удаления, пожалуйста, помогите.

{% block content %}

<br>
<div class="row">
    <div class="col-md-6">
        <div class="card card-body">
            <p>Are you sure you want to delete "{{item}}"?</p>

            <form action="{% url 'delete_order' item.id %}" method="POST">

                {% csrf_token %}
                <a class="btn btn-warning" href="{% url 'home' %}">Cancel</a>
                <button type="submit" class="btn btn-danger">Delete</button>
            </form>

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

{% endblock %}

Мой urls.py файл выглядит следующим образом.

urlpatterns = [
    path('delete_order/<str:pk>', views.deleteOrder, name="delete_order"),
]

Bootstrap Удалить всплывающее окно, мне нужна помощь.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </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>

Мой Home page сделан из таблицы, содержащей Удалить столбец для удаления каждой строки.

<table class="table table-sm">
                <tr>
                    <th>Product</th>
                    <th>Date Ordered</th>
                    <th>Status</th>
                    <th>Update</th>
                    <th>Delete</th>
                </tr>

                {% for order in orders %}
                <tr>
                    <td>{{ order.product }}</td>
                    <td>{{ order.date_created }}</td>
                    <td>{{ order.status }}</td>
                    <td><a class="btn btn-sm btn-info" href="{% url 'update_order' order.id %}">Update</a></td>
                    **<td><a class="btn btn-sm btn-danger" href="{% url 'delete_order' order.id %}">Delete</a></td>**
                </tr>
                {% endfor %}

            </table>

Строка, которую я добавил ** звездочками (намеренно), - это та, которую я хочу изменить, чтобы при нажатии на кнопку Удалить запускалась всплывающая модальная строка Bootstrap delete.

Answer 1

Попробуйте это.

<!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <a class="btn btn-sm btn-danger" href="{% url 'delete_order' order.id %}">Delete</a>
          </div>
        </div>
      </div>
    </div>

<table class="table table-sm">
    <tr>
        <th>Product</th>
        <th>Date Ordered</th>
        <th>Status</th>
        <th>Update</th>
        <th>Delete</th>
    </tr>

    {% for order in orders %}
    <tr>
        <td>{{ order.product }}</td>
        <td>{{ order.date_created }}</td>
        <td>{{ order.status }}</td>
        <td><a class="btn btn-sm btn-info" href="{% url 'update_order' order.id %}">Update</a></td>
        <td><a class="btn btn-sm btn-danger" href="#" data-toggle="modal" data-target="#exampleModal">Delete</a></td>
    </tr>
    {% endfor %}

</table>

--- ОБНОВЛЕНИЕ ---
url.py, чаще всего используется urls.py
Ваш ПК должен быть int не str

urlpatterns = [
    path('delete_order/<int:pk>', views.deleteOrder, name="delete_order"),
]