リダイレクト前の確認としてモーダルを実装する

Question

現在、行をクリックすると、ユーザーが情報を送信できる確認ページとして機能するモーダルを表示するテーブルを実装しようとしています。ユーザーがモーダルで提出をクリックすると、行データをSQLデータベースに追加し、ユーザーを別のページにリダイレクトする必要があります。ユーザーがクリックした情報をpythonコードに渡してSQLに追加できるようになり、リダイレクトするページを取得できなくなりました。

この

は、これは私のテーブルタグ

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

である私のこれが私の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')); 
    }); 

ある

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

モーダルこれは私の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

あなたは私のpythonについて多くを知らないが、あなたがテーブルの行を取得したいように、私はあなたの質問から理解して何からそれはそう確認モーダル

http://bootboxjs.com

Answer 2

ためBootbox.jsを使用することができますモーダルにクリック。

もしそうなら、いくつかの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