在重定向之前实现 Modal 作为确认答案

【问题标题】：Implementing Modal as confirmation before redirecting在重定向之前实现 Modal 作为确认
【发布时间】：2018-05-18 06:22:02
【问题描述】：

我目前正在尝试实现一个表格，当单击一行时，将显示一个模式，作为确认页面，然后用户可以在其中提交信息。当用户在modal中点击提交时，需要将行数据添加到sql数据库中，并将用户重定向到另一个页面。我被困在如何将用户单击的信息传递给我的 python 代码，我可以将它添加到 sql 并且我无法让页面重定向。

这是我的表格标签

<tr class="room" data-id="{{ res.room_id }}" data-toggle="modal" data-target="#orderModal" >

这是我的模态

<div id="orderModal" class="modal fade" role="dialog" aria-labelledby="orderModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2>Order</h2>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
      </div>
      <div id="orderDetails" class="modal-body"></div>
      <div id="orderItems" class="modal-body"></div>

      <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <a href="#" id="submit" type="submit" class="btn btn-success">Submit</a>
      </div>
    </div>
  </div>
</div>

</div>

这是我的javascript

$('#orderModal').modal({
        keyboarnd: true,
        backdrop: "static",
        show:false,

    }).on('show.bs.modal', function(){
          var getIdFromRow = $(this).data('orderid');
        //make your ajax call populate items or what even you need
        $(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow  + '</b>'))
    });

    $(".table-striped").find('tr[data-target]').on('click', function(){
        //or do your operations here instead of on show of modal to populate values to modal.
         $('#orderModal').data('orderid',$(this).data('id'));
    });

这是我的python伪代码

@app.route("/table", methods=["GET", "POST"])
@login_required
def book():
     # """Confirm the room you have selected to book"""

     # User reached route via POST (as by submitting a form via POST) --> BUT ONLY BY CLICKING OK BUTTON, NOT CANCEL BUTTON
    if request.method == "POST":

         # Update bookings with user's booking
         # Redirect to history.html where it displays a table of only your history of bookings (date, start time, end time, room)

          return redirect("/")

    else:
        return render_template("history.html")

感谢您的帮助！

【问题讨论】：

标签： javascript php python html twitter-bootstrap

【解决方案1】：

我对 python 了解不多，但从我从你的问题中了解到，你似乎想要获取你点击到模态的表格行。

如果是这样，您可以使用一些 javascript 来执行此操作。给表格行添加onclick事件，并在modal中传递你想要的参数：例如onclick="setModalValues('1', 'John Doe')

<tr class="room" data-id="{{ res.room_id }}" data-toggle="modal" data-target="#orderModal"  onclick="setModalValues('1', 'John Doe')>

编写一个javascript来设置点击时的模态表单输入值。

<script type="text/javascript">
 function setModalValues(id, name) {
    $("#modalID").val(id);
    $("#modalName").val(name);
 }
</script>

在模式中，您可以有一个带有输入字段的表单，例如：

<input type="hidden" class="form-control" id="modalID"  name="modalID">

<div class="form-group">
   <label for="name">Name:</label>
   <input type="text" class="form-control" id="modalName" name="modalName">
</div>

希望你可以在你的情况下实现类似的东西。

查看示例小提琴here

【讨论】：

【解决方案2】：

您可以使用 Bootbox.js 进行确认模式

http://bootboxjs.com

【讨论】：