重定向之前将Modal用作确认

Question

我当前正在尝试实现一个表，当单击某行时，该表将显示一个用作确认页面的模式，然后用户可以在其中提交信息。 当用户单击模式中的提交时，它需要将行数据添加到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")

感谢您的任何帮助！

Answer 1

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

http://bootboxjs.com

Answer 2

我对python的了解不多，但是从我对您的问题的了解来看，您似乎想获得单击模态的表行。

如果是这样，您可以使用一些JavaScript来做到这一点。 将onclick事件添加到表行中，并在模式中传递所需的参数：例如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>

希望您可以针对您的情况实施类似的操作。

在这里查看样本小提琴