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

【问题标题】：How to use same bootstrap modal for 2 different submit buttons in django?如何在 django 中为 2 个不同的提交按钮使用相同的引导模式？
【发布时间】：2019-01-05 10:49:32
【问题描述】：

我有 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>

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

【问题讨论】：

标签： django bootstrap-4 bootstrap-modal

【解决方案1】：

我相信您不需要表单来进行重置。您可以使用带有 自定义类 的按钮（例如 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 按钮保留为模式关闭。 p>

<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 中只需将 anchor 的 href 属性与 reset-anchor id 设置为来自单击按钮的 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>

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

【讨论】：