Модальный диалог Bootstrap не отображается при нажатии на кнопку или ссылку в шаблоне Django
Я пытаюсь заставить кнопку в представлении django отображать модальный диалог для запроса подтверждения удаления элемента списка. Когда я нажимаю на кнопку, я не могу добиться отображения модального диалога. Есть идеи?
Диалог (включен из шаблона Django)
<div
id="confirmModal"
class="modal fade"
tabindex="-1"
role="dialog"
caller-id=""
aria-labelledby="confirmModal"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body" id="modal-message">
Do you wish to proceed?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="confirmButtonModal">Confirm</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
var buttons = document.querySelectorAll("[data-target='#confirmModal']");
for (const button of buttons) {
button.addEventListener("click", function(event) {
// find the modal and add the caller-id as an attribute
var modal = document.getElementById("confirmModal");
modal.setAttribute("caller-id", this.getAttribute("id"));
// extract texts from calling element and replace the modals texts with it
if ("message" in this.dataset) {
document.getElementById("modal-message").innerHTML = this.dataset.message;
};
if ("buttontext" in this.dataset) {
document.getElementById("confirmButtonModal").innerHTML = this.dataset.buttontext;
};
})
}
document.getElementById("confirmButtonModal").onclick = () => {
// when the Confirm Button in the modal is clicked
var button_clicked = event.target
var caller_id = button_clicked.closest("#confirmModal").getAttribute("caller-id");
var caller = document.getElementById(caller_id);
// open the url that was specified for the caller
window.location = caller.getAttribute("href");
};
});
</script>
base.html
<!DOCTYPE html>
<html>
<head>
{% load static %}
<title>Unisport</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/main.css' %}">
</head>
...
...
{% block content %}{% endblock content %}
...
...
</html>
Шаблон : Список объектов : Включает html-файл модального диалога
Включение модального диалога через {% include "web/product_confirm_delete-dialog.html" %}
{% extends "base.html" %}
{% block content %}
<div class="container">
<div class="row">
{% for object in object_list %}
{% include "web/product_confirm_delete-dialog.html" %}
<div class="col">
<div class="card">
<h5 class="card-header">{{object.name}}</h5>
<img class="card-img-top" src="{{object.image}}" alt="Card image">
<div class="card-body">
<p class="card-text">{{object.max_price}} {{object.currency.id}}</p>
<p class="card-text">{{object.min_price}} {{object.currency.id}}</p>
<p class="card-text">-{{object.discount_percentage}}%</p>
<p class="card-text">{{object.recommended_retail_price}} {{object.currency.id}}</p>
</div>
<div class="card-footer">
<a href="{{object.url}}" class="btn btn-primary">Info</a>
<a href={{object.get_absolute_url}} class="btn">Edit</a>
<a
href="#confirmModal"
class="btn btn-primary"
data-toggle="modal"
data-target="#confirmModal"
id="product_{{object.id}}"
>
Delete
</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="pagination">
<span class="page-links">
{% if page_obj.has_previous %}
<a href="?page={{ page_obj.previous_page_number }}">previous</a>
{% endif %}
<span class="page-current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}">next</a>
{% endif %}
</span>
</div>
</div>
{% endblock content %}
Решается использованием правильного тега для запуска отображения модального диалога. Мне нужно было использовать data-bs-toggle и data-bs-target для bootstrap 5. До этого я использовал data-toggle и data-target.
{% extends "base.html" %}
{% block content %}
<div class="container">
<div class="row">
{% for object in object_list %}
{% include "unisport_web/product_confirm_delete-dialog.html" %}
<div class="col">
<div class="card">
<h5 class="card-header">{{object.name}}</h5>
<img class="card-img-top" src="{{object.image}}" alt="Card image">
<div class="card-body">
<p class="card-text">{{object.max_price}} {{object.currency.id}}</p>
<p class="card-text">{{object.min_price}} {{object.currency.id}}</p>
<p class="card-text">-{{object.discount_percentage}}%</p>
<p class="card-text">{{object.recommended_retail_price}} {{object.currency.id}}</p>
</div>
<div class="card-footer">
<a href="{{object.url}}" class="btn btn-primary">Info</a>
<a href={{object.get_absolute_url}} class="btn">Edit</a>
<a
href="#confirmModal"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#confirmModal"
id="product_{{object.id}}"
>
Delete
</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="pagination">
<span class="page-links">
{% if page_obj.has_previous %}
<a href="?page={{ page_obj.previous_page_number }}">previous</a>
{% endif %}
<span class="page-current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}">next</a>
{% endif %}
</span>
</div>
</div>
{% endblock content %}