Trying to open a modal with specific user ids

user_14444502 0
Viewed 70

I've made a table with some employees and I'm using modals for Add new / Details / Edit / Delete.

I don't know how to open the details modal for specific users... [USING BOOTSTRAP 5].

This is the button:

<td method="MODAL"><button type="button" class="btn btn-sm btn-block btn-info" data-id="<?php echo $employee['e_id']; ?>" data-toggle="modal" data-target="#designerDetails">Details</button></td>

And here is the modal:

<div class="modal fade" id="designerDetails" data-e-id="<?php echo $employee['e_id']; ?>" tabindex="-1" aria-labelledby="designerDetails" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Designer details</h5>
      <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
         <table class="table">
         <?php            
                          $sql = "SELECT * FROM employees";
                           $result = mysqli_query($conn, $sql);

                           if (mysqli_num_rows($result) > 0) {
                            while($employee = mysqli_fetch_assoc($result)) { ?>
             <tr>
                 <th>ID</th>
                 <td><?php echo $employee['e_id']; ?></td>
             </tr>
             <tr>
                 <th>Name</th>
                 <td><?php echo $employee['e_name']; ?></td>
             </tr>
             <tr>
                 <th>Email adress</th>
                 <td><?php echo $employee['e_email']; ?></td>
             </tr>
             <tr>
                 <th>Phone number</th>
                 <td><?php echo $employee['e_phone']; ?></td>
             </tr>
             <?php         
                           }      
                              } else {
                                  echo "0 results";
                              }

                      ?>
         </table>
    </div>
  </div>
</div>
css html php jquery javascript
1 Answers

You can do it the following way. But if you have a lot of data this method is not suitable you may have to use aJax to load the data.

<td><button type="button" class="btn btn-sm btn-block btn-info " data-id="<?php echo $employee['e_id']; ?>" data-name="<?php echo $employee['e_name']; ?>" data-email="<?php echo $employee['e_email']; ?>" data-phone="<?php echo $employee['e_phone']; ?>" 
>Details</button></td>

Modal

<div class="modal fade" id="designerDetails" tabindex="-1" aria-labelledby="designerDetails" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Designer details</h5>
      <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
         <table class="table">
             <tr>
                 <th>ID</th>
                 <td id="e_id"></td>
             </tr>
             <tr>
                 <th>Name</th>
                 <td id="e_name"></td>
             </tr>
             <tr>
                 <th>Email adress</th>
                 <td id="e_email"></td>
             </tr>
             <tr>
                 <th>Phone number</th>
                 <td id="e_phone"></td>
             </tr>
         </table>
    </div>
  </div>
</div>

Javascript

$(document).on('click','.designerDetails', function(event) { 
    $('#e_id').html($(this).data('id'));
    $('#e_name').html($(this).data('name'));
    $('#e_email').html($(this).data('email'));
    $('#e_phone').html($(this).data('phone'));
    $('#designerDetails').modal('show');
});
user_123343610
Related