时间戳

首页 > 解决方案 > 带有多个按钮的烧瓶确认模式

html - 带有多个按钮的烧瓶确认模式

问题描述

我正在开发一个 Flask 应用程序，其中我有一个带有多个按钮的页面，并且对于每个按钮，当单击时我想要一个“确认 - 你确定吗？” 弹出窗口，然后进入另一个视图功能，该功能负责根据按钮运行作业。我被困在试图找到一种方法通过模态从按钮传递变量以运行视图功能。

这是我到目前为止所尝试的：

应用程序.py：

@app.route('/buttons', methods=['GET', 'POST'])
def buttons():
return render_template("buttons.html")

@app.route('/run/<cmd>', methods=['GET', 'POST'])
def run(cmd):
    return render_template_string('''
    cmd = {{ cmd }}<br>
''', cmd=cmd)

按钮.html：

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<meta charset="utf-8">
 <script type="text/javascript">
 $(document).on("click", ".open-modal", function () {
 var mycmd = $(this).data('id');
 $(".modal-body #cmd").val( mycmd );
 $("#confirm-modal").modal("show");
<script>
</head>
<body>


        <form method="post" action="/">

          <button type="button" class="open-modal" data-toggle="modal" data-id="Test" data-target="#confirm_modal">Test</button>
          <button type="button" class="open-modal" data-toggle="modal" data-id="Test2" data-target="#confirm_modal">Test2</button>

        </div>
    </form>

    <!-- Modal for Pop Up-->
    <div class="modal" tabindex="-1" role="dialog" id="confirm-modal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Confirm</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Confirm - Are you sure?</p>
           <input type="hidden" name="cmd" id="cmd" value=""/>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

            <form action="{{ url_for('run', cmd=cmd) }}" method="POST">
            <input class="btn btn-secondary" type="submit" name="submit_button" value="Confirm">

          </div>
        </div>
      </div>
    </div>

 </body>

在尝试添加模式之前，我在 button.html 中的表单中使用了提交按钮，我将在按钮函数中捕获按钮的值并将变量传递给会话，然后在运行函数中获取它。然而，模式需要一个按钮 type="button" 用于触发器，它不会将任何内容发送回表单。我还研究了使用并以某种方式传递隐藏的输入值或从不同的 HTML 页面提供模式。

关于使这项工作的最佳方法的任何建议？以前我有一个确认删除模式，我只是将模式的确认按钮包装在一个带有 url_for 工作的表单中，所以我认为这不会那么复杂。不幸的是，我不太精通 Java 脚本。任何帮助深表感谢！

标签： htmlflaskbootstrap-modal

解决方案

在 Jessi 的帮助下 - 这以问题中描述的方式解决。

按钮.html：

  <!-- Trigger buttons for modal-->
  <a data-toggle="modal" class="btn btn-primary" id="Test" value="btn_display_value" data-target="#confirm_modal" onclick="aPassValueFunction(this)"> Test</a> &nbsp;
  <a data-toggle="modal" class="btn btn-primary" id="Test2" value="btn_display_value" data-target="#confirm_modal" onclick="aPassValueFunction(this)"> Test2</a> &nbsp;


    <!-- Modal for Pop Up-->
    <div class="modal" tabindex="-1" role="dialog" id="confirm-modal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Confirm</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Confirm - Are you sure?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

            <form action="{{ url_for('run') }}" method="POST">
            <input name="pass_value" type="hidden" value="pass_value" id="hidden_input">
            <input class="btn btn-secondary" type="submit" name="submit_button" value="Confirm">
          </div>
        </div>
      </div>
    </div>

    <script>
        function aPassValueFunction(obj){
            let valuefromID = obj.id;
            $('#hidden_input').val(valuefromID);
            $("#confirm-modal").modal("show");
        }
    </script>

应用程序.py：

@app.route('/buttons', methods=['GET', 'POST'])
def buttons():
return render_template("buttons.html")

@app.route('/run', methods=['GET', 'POST'])
def run():
  if request.method == 'POST':
    if request.form['pass_value'] == 'Test':
    value ='Test just for fools and horses!'
    return render_template_string('''{{ value }}<br>''')
  elif request.form['pass_value'] == 'Test2':
    value ='Test2'
    return render_template_string('''{{ value }}<br>''')

推荐阅读