Passing a row ID in a table to a modal in flask (python)

I have an HTML table which displays some data from a database table.Data is displayed by using a loop.Each row has a button that is also generated via a loop. Am using the button to edit data in a row. When a button is clicked, a modal pops up with data to be edited.The problem is that it only picks the first ID in the rows (i.e it picks only row one). Even when I click on row two button , the info displayed in the fields in the modal is for row one.Please any guide on how I will o about this ? How can I fix this ? Note : Am using flask

This is my code:

<div>
   <table class="table" id="users">
         <thead>
            <tr class="success">
               <th>#</th>
               <th>Staff ID</th>
               <th>Role</th>
               <th>Designation</th>
               <th>Phone</th>
               <th>Email</th>
               <th>Department</th>
               <th>Edit</th>


            </tr>
         </thead>
         
         <tbody>
            {% for user in users %}
               <tr>
                  <td>{{ user.id }}</td>
                  <td>{{ user.staffid }}</td>
                  <td>{{ user.role }}</td>
                  <td>{{ user.designation }}</td>
                  <td>{{ user.phone }}</td>
                  <td> {{ user.email }} </td>
                  <td> {{ user.dept }} </td>
                  <td><a href="#" data-toggle="modal" data-target='#edit' class="btn btn-success"><i class="fa fa-edit"></i> EDIT </a></td>
                  
               </tr>
               <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                              <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title"> <i class="fa fa-edit"></i> Edit User Information </h4>
                                </div>
                                <div class="modal-body">
                                    <form  method="post" action="/edit_profile">
                                       <div class="form-group">
                                        <input type="text" class="form-control" value="{{ user.staffid }}" name="staffid" required>
                                       </div>
                                       <div class="form-group">
                                        <input type="text" class="form-control" value="{{ user.role }}"  name="role" required>
                                       </div>
                                       <div class="form-group">
                                        <input type="text" class="form-control" value="{{ user.designation }}"  name="designation" required>
                                       </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default btn-danger" data-dismiss="modal"><i class="fa fa-remove" aria-hidden="true"></i>Cancel</button>
                                        <button type="submit" name="action" class="btn btn-primary" style="width:100px"><i class="fa fa-check"></i> Submit</button>
                                    </div>
                                </form>
     
                     </div>
                  </div>
         </div>
  </div>
 <script> $('#edit').modal(show); </script>
            {% endfor %}
         </tbody>
      </table>  
<script type="text/javascript">
  $(document).ready( function () {
    $('#users').DataTable();
} );
  </script>          
             
<div>

Answer

As I see you create a modal form for each user row. That’s seems a bit costy to me as it means a lot of html when you have many rows. A better approach in my opinion would be to define only one modal and dynamically insert the content via Ajax.

However, the reason why your approach is not working is because you use the same id for each modal. Change the first line of your modal to

<div class="modal fade" id="edit{{ user.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

and accordingly the line of your edit button:

<td><a href="#" data-toggle="modal" data-target='#edit{{ user.id }}' class="btn btn-success"><i class="fa fa-edit"></i> EDIT </a></td>

and you should be fine.

Advertisement

Answer