Search code examples
javascriptbootstrap-modalbootstrap-5

There are three modals on a page. Each respective modal opens correctly, but with wrong modal body content

Each button opens a different modal

1

I have a peculiar issue with Bootstrap 5 modal. I have a webpage that lists database records (please see screenshot). Each record has three buttons to open their respective modal (view, edit, other).

Once the page loads, if I click the 'view' button to open its respective modal, the content of the modal body appears correctly. If I close this modal and then click either my 'edit' or 'other' buttons to open their respective modal, the content of the modal body is that of my 'view' modal - even though the modal header displays the correct title for my 'edit' and 'other' modals (suggesting to me that the correct block of 'modal code' is in play).

Now, if I refresh the webpage, and then click either my 'edit' or 'other' buttons (not clicking the 'view' button just yet), the respective modal opens with the correct content in the modal body as expected. But, once I click my 'view' button and open its respective modal, all subsequent attempts to open my 'view' and 'other' modals keep displaying the modal body content of my 'view' modal - despite what the modal header title shows.

My code is listed below. Since I an not experienced in Javascript, I suspect the case of this issue lies there. Any feedback is appreciated.

HTML Table Code:

<table >
  <thead>
     <tr>
        <th>ID</th>
        <th>Name (Last, First)</th>
        <th>Actions</th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td>1046</td>
        <td>ABBE, BILLY</td>
        <td>
           <button id="1046" class="btn btn-primary btn-sm me-1 mb-1 " role="button" />View</button>
           <a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyEditBtn" role="button" />Edit</a>
           <a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyOtherBtn" role="button" />Another Action</a>
        </td>
     </tr>
     <tr>
        <td>506</td>
        <td>ABBEY, TEST</td>
        <td>
            <button id="506" class="btn btn-primary btn-sm me-1 mb-1 " role="button" />View</button>
            <a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyEditBtn" role="button" />Edit</a>
            <a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyOtherBtn" role="button" />Another Action</a>
        </td>
     </tr>
  </tbody>
</table>

Modal HTML:

<div class="modal fade" id="MyEditModal" tabindex="-1" role="dialog" aria-labelledby="MyEditModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="MyEditModalLabel">Edit Modal</h5>
         </div>
         <form action="xxxx.php" method="post" name="EditForm" id="EditForm">
            <div class="modal-body">
               <h6 class="mt-2">Test edit modal</h6>
               <div class="form-floating">
                  <input class="form-control border-0 fw-bold bg-white" type="text" name="Edit_Name" id="Edit_Name" >
                  <label for="Edit_Name" class="form-label">Name:</label>
               </div>
               <div class="form-floating">
                  <input class="form-control border-0 fw-bold bg-white" type="text" name="Edit_Email" id="Edit_Email" >
                  <label for="Edit_Email" class="form-label">Email:</label>
               </div>
               <input type="text" name="Edit_ID" id="Edit_ID">
               <input type="hidden" name="Modal_Type" value="Edit" />
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
               <button type="submit" name="editdata" class="btn btn-warning">Save</button>
            </div>
         </form>
      </div>
   </div>
</div>


<div class="modal fade" id="MyOtherModal" tabindex="-1" role="dialog" aria-labelledby="MyOtherModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="MyOtherModalLabel">Other Modal</h5>
         </div>
         <form action="xxxx.php" method="post" name="OtherForm" id="OtherForm">
            <div class="modal-body">
               <h6 class="mt-2">Test other modal</h6>
               <div class="form-floating">
                  <input class="form-control" type="text" name="Other_Name" id="Other_Name" >
                  <label for="Other_Name" class="form-label">Name:</label>
               </div>
               <div class="form-floating">
                  <input class="form-control" type="text" name="Other_Email" id="Other_Email" >
                  <label for="Other_Email" class="form-label">Email:</label>
               </div>
               <input type="text" name="Other_ID" id="Other_ID">
               <input type="hidden" name="Modal_Type" value="Other" />
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
               <button type="submit" name="adddata" class="btn btn-warning">Save</button>
            </div>
         </form>
      </div>
   </div>
</div>


<div class="modal fade" tabindex="-1" id="ShowRecordModal" role="dialog" aria-labelledby="MyViewModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
         <div class="modal-content">
            <div class="modal-header" id="ShowRecordModal">
               <h5 class="modal-title">Customer Details</h5>
               <button type="button" class="btn-close no-print" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body"> </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
</div>

Supporting Javascript:

<script>
    $(document).ready(function() {
        $('table tbody').on('click', 'button', function() {
            $tr = $(this).closest('tr');   
            var data = $tr.children("td").map(function () {
              return $(this).text();
            }).get(); 
            cust_id = data[0];
            $.ajax({url: "readtest.php",
                        method: 'post',
                        data: {CID:cust_id},
                        success: function(result) {
                            $(".modal-body").html(result);
                        }
            });
            $('#ShowRecordModal').modal('show');
        })
    })
</script>

<script>
  $(document).ready(function () {   
        $('.MyEditBtn').on('click', function () {   
            $('#MyEditModal').modal('show');
            $tr = $(this).closest('tr');   
            var data = $tr.children("td").map(function () {
              return $(this).text();
            }).get();   
            $('#Edit_ID').val(data[0]);
            $('#Edit_Email').val(data[1]);
            $('#Edit_Name').val(data[2]);
        });
  });
</script>   

<script>
  $(document).ready(function () {   
        $('.MyOtherBtn').on('click', function () {   
            $('#MyOtherModal').modal('show');
            $tr = $(this).closest('tr');   
            var data = $tr.children("td").map(function () {
              return $(this).text();
            }).get();   
            $('#Other_ID').val(data[0]);
            $('#Other_Email').val(data[1]);
            $('#Other_Name').val(data[2]);
        });
  });
</script>

I've removed extraneous codes such as the DataTables plug-in leaving only the minimum code to eliminate possible third-party components involvement in the issue.

Solution

  • The reason why all your modals get the same content in the modal body after clicking on the "view" button is because you're targeting the .modal-body of every modal on your page in your jQuery $.ajax() function: $(".modal-body").html(result);.

    You need to target the modal ID first in the jQuery selector $():

    $("#ShowRecordModal .modal-body").html(result);