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>

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

查看示例小提琴here

在重定向之前将Modal实现为确认

2 个答案: