文章/答案/技术大牛

发布

社区首页 >问答首页 >在Django模板中单击按钮或链接时未显示引导模式对话框

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

Stack Overflow用户

提问于 2022-08-14 16:23:56

回答 1查看 155关注 0票数 0

我试图在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 %}

django

twitter-bootstrap

bootstrap-5

回答 1

Stack Overflow用户

发布于 2022-08-14 17:48:31

通过使用正确的标签触发模态对话框的显示来解决问题。我需要使用data-bs-toggle和data-bs-target来引导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 %}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73353229

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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