在 Django 模板中单击按钮或链接时不显示引导模式对话框

Question

I am trying to get a button in a django view to display a model dialog to request delete confirmation of a list item.我试图在 django 视图中获取一个按钮，以显示 model 对话框以请求删除确认列表项。 When I click the button I cannot get the modal dialog to display.当我单击按钮时，我无法显示模态对话框。 Any ideas?有任何想法吗？

Dialog (included from Django Template)对话框（包含在 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底座.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>

Template: List of objects: Includes modal dialog html file模板：对象列表：包括模态对话框 html 文件

Includes modal dialog via {% include "web/product_confirm_delete-dialog.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 %}

Answer 1

Solved by using the correct tag to trigger the display of the modal dialog.通过使用正确的标签来触发模态对话框的显示来解决。 I needed to use data-bs-toggle and data-bs-target for bootstrap 5. Previously, I was using data-toggle and data-target .我需要为 bootstrap 5 使用data-bs-toggle和data-bs-target 。以前，我使用的是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 %}

在 Django 模板中单击按钮或链接时不显示引导模式对话框

问题描述

1 个解决方案

解决方案1
0 2022-08-14 17:48:31

在 Django 模板中单击按钮或链接时不显示引导模式对话框

问题描述

1 个解决方案

解决方案1 0 2022-08-14 17:48:31

解决方案1
0 2022-08-14 17:48:31