重定向之前将Modal用作确认

Question

I am currently trying to implement a table that, when a row is clicked on, will display a modal that acts as a confirmation page where the user can then submit the information. When the user clicks on the submit in the modal, it needs to add the row data to a sql database and redirect the user to another page. I am stuck on how to pass the information that the user clicks on to my python code where I can add it to sql and I can't get the page to redirect.

This is my table tag

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

This is my 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>

This is my 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'));
    });

This is my python pseudocode

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

Thank you for any help!

Answer 1

You can use Bootbox.js for confirmation modal

http://bootboxjs.com

Answer 2

I do not know much about python, but from what I understand from your question it seems like you want to get the table row that you clicked to the modal.

If so, you can use some javascript to do that. Add an onclick event to the table rows and pass the parameters you want in the modal: Eg onclick="setModalValues('1', 'John Doe')

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

Write a javascript to set modal form input values on click.

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

In the modal you could have a form with the inputs fields like:

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

Hope you can implement something similar in your case.

See a sample fiddle here