时间戳

首页 > 解决方案 > 如何在 django 中为 2 个不同的提交按钮使用相同的引导模式？

django - 如何在 django 中为 2 个不同的提交按钮使用相同的引导模式？

问题描述

我有 2 个按钮基本上提交表单，但我首先需要从用户那里确认并为此使用模式

            <form action="{% url 'reset_pl' %}" method="post" style="display: inline;">
            {% csrf_token %}
            <button type="submit" class="btn btn-primary btn-xs">
            <span class="glyphicon glyphicon-remove"></span>Clear Players
            </button>
            </form>

            <form action="{% url 'reset_all' %}" method="post" style="display: inline;">
            {% csrf_token %}
            <button type="submit" class="btn btn-primary btn-xs">
            <span class="glyphicon glyphicon-remove"></span>Clear Teams
            </button>
            </form>

以及我需要与它们一起使用但不想重复代码的模式

<div class="modal fade" id="clear" tabindex="-1" role="dialog" aria-labelledby="Clear" aria-hidden="true">
<div class="modal-dialog modal-sm modal-notify modal-danger modal-dialog-centered" role="document">
    <!--Content-->
    <div class="modal-content text-center">
        <!--Header-->
        <div class="modal-header">
            <p class="heading lead">Are you sure?</p>
        </div>
        <!--Footer-->
        <div class="modal-footer justify-content-center">
           <button class="btn btn-primary btn-xs" data-dismiss="modal">Yes</button>

            <button class="btn btn-primary btn-xs" data-dismiss="modal">No</button>
        </div>
    </div>
    <!--/.Content-->
</div>

我不确定如何动态更改表单的操作或让模式知道单击按钮时实际提交表单的位置。

标签： djangobootstrap-4bootstrap-modal

解决方案

我相信您不需要表格来进行重置。您可以只使用带有自定义类的按钮（例如 reset-pl 和 reset-all），通过其data-target属性在单击时触发模式打开，同时将按钮的data-id属性中的适当 url 传递给模式。

<button class="reset-pl" data-id="{% url 'reset_pl' %}" type="button" data-toggle="modal" data-target="#clear">
    <span class="glyphicon glyphicon-remove"></span>Clear Players
</button>

<button class="reset-all" data-id="{% url 'reset_all' %}" type="button" data-toggle="modal" data-target="#clear">
    <span class="glyphicon glyphicon-remove"></span>Clear Teams
</button>

将适当的id（例如，reset-anchor）添加到Yes锚点，然后将No按钮保留为模式关闭。

<a id="reset-anchor" class="btn btn-primary btn-xs">Yes</a>
<button class="btn btn-primary btn-xs" data-dismiss="modal">No</button>

比在javascript中只需将带有reset-anchor id的anchor的href属性设置为来自单击按钮的data-id的适当url 。

<script type="text/javascript">
    $(".reset-pl").click(function () {
        $("#reset-anchor").attr("href", $(this).data("id"));
    });

    $(".reset-all").click(function () {
        $("#reset-anchor").attr("href", $(this).data("id"));
    });
</script>

总之，当单击按钮时，通过数据目标打开模式，同时通过 javascript将来自数据 ID 的 url 设置为是按钮的 href。是按钮当然比单击时触发适当的 url。

推荐阅读