Implementieren von Modal als Bestätigung vor dem Umleiten

Question

Ich versuche derzeit, eine Tabelle zu implementieren, die beim Klicken auf eine Zeile ein Modal anzeigt, das als Bestätigungsseite fungiert, auf der der Benutzer die Informationen senden kann. Wenn der Benutzer auf das Senden im Modal klickt, muss er die Zeilendaten zu einer SQL-Datenbank hinzufügen und den Benutzer auf eine andere Seite umleiten. Ich bin fest, wie ich die Informationen, die der Benutzer auf meinen Python-Code klickt, weitergeben kann, wo ich es zu SQL hinzufügen kann und ich kann die Seite nicht umleiten.

Das ist mein Tabellentag

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

Das ist mein modal

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

Dies ist mein 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')); 
    }); 

Das ist mein Python Pseudo-Code

@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") 

Vielen Dank für jede Hilfe!

Answer 1

können Sie verwenden Bootbox.js zur Bestätigung modal

http://bootboxjs.com

Answer 2

Ich weiß nicht viel über Python, aber von dem, was ich aus Ihrer Frage verstehen scheint es, wie Sie die Tabellenzeile erhalten möchten, dass Sie Klicken Sie auf das Modal.

Wenn ja, können Sie einige Javascript verwenden, um das zu tun. Fügen Sie ein Onclick-Ereignis an die Tabellenzeilen und die Parameter übergeben Sie im Modal wollen: ZB onclick="setModalValues('1', 'John Doe')

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

eine Javascript schreiben modale Formular Eingabewerte auf Klick zu setzen.

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

Im modal Sie ein Formular mit den Eingängen Bereichen wie haben könnte:

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

Hoffe, dass Sie etwas ähnliches in Ihrem Fall umsetzen können.

Siehe eine Beispielgeige here