Error Opening Bootstrap Modal With JavaScript

I'm working on a piece of UI that involves a listing of rows in the database. Each row is editable, and when the edit button is clicked, my intent is to bring up a modal dialogue window with data preloaded in a form via AJAX for editing that specific row as shown in the following picture.

The following code shows a working setup you can play with.

jQuery(document).ready(function() {
  // console.log('podcast episode list js loaded');
  // jQuery('#editModal').modal('show');
});

function loadEditModal(rowID) {
  console.log("Clicked row " + rowID + "\n");
  //populate the content of the modal window
  //jQuery('#editModal').modal('show');
  modal1 = bootstrap.Modal.getOrCreateInstance('#editModal');
  modal1.show();
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <!-- table displaying contents of encoding queue -->
  <div class="row">
    <div class="table-responsive-xxl">
      <table class="table table-hover table-sm">
        <thead>
          <tr>
            <th scope="col">ID#</th>
            <!-- episode_id -->
            <th scope="col">Podcast</th>
            <!-- podcast_code -->
            <th scope="col">Title</th>
            <th scope="col">Seq.</th>
            <th scope="col">Status</th>
            <!-- last_action -->
            <th scope="col">Date</th>
            <!-- last_action_date -->
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>8</td>
            <td>bw</td>
            <td>Build a birdhouse</td>
            <td>345</td>
            <td>{"error":"none","message":"initial insert","status":"processing"}</td>
            <td>2023-03-22</td>
            <td class="text-end" style="white-space: nowrap">
              <!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Edit</button> -->
              <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" onclick="loadEditModal(8)">Edit</button>
              <!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Republish</button> -->
              <button type="button" class="btn btn-outline-secondary btn-sm">Republish</button>
            </td>
          </tr>

        </tbody>
      </table>
    </div>
  </div>
  <!-- class="row" -->

  <!-- modal for editing rows -->
  <div class="row">
    <div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editModalLabel" style="display: none;" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="editModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body" id="editModalBody">
            this is where the body content goes...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

However, I'm getting the following error in the js console every time the edit button is clicked to display the modal:

Uncaught TypeError: can't access property "backdrop", this._config is undefined

This appears to be due to the fact that I'm launching the modal via javascript with the onclick event. If I change the html and js slightly as follows, and use the "data-bs-target" property of the button to open the modal instead, it all works without js errors.

jQuery(document).ready(function() {
  // console.log('podcast episode list js loaded');
  // jQuery('#editModal').modal('show');
});

function loadEditModal(rowID) {
  console.log("Clicked row " + rowID + "\n");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <!-- table displaying contents of encoding queue -->
  <div class="row">
    <div class="table-responsive-xxl">
      <table class="table table-hover table-sm">
        <thead>
          <tr>
            <th scope="col">ID#</th>
            <!-- episode_id -->
            <th scope="col">Podcast</th>
            <!-- podcast_code -->
            <th scope="col">Title</th>
            <th scope="col">Seq.</th>
            <th scope="col">Status</th>
            <!-- last_action -->
            <th scope="col">Date</th>
            <!-- last_action_date -->
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>8</td>
            <td>bw</td>
            <td>Build a birdhouse</td>
            <td>345</td>
            <td>{"error":"none","message":"initial insert","status":"processing"}</td>
            <td>2023-03-22</td>
            <td class="text-end" style="white-space: nowrap">
              <!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Edit</button> -->
              <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#editModal" onclick="loadEditModal(8)">Edit</button>
              <!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Republish</button> -->
              <button type="button" class="btn btn-outline-secondary btn-sm">Republish</button>
            </td>
          </tr>

        </tbody>
      </table>
    </div>
  </div>
  <!-- class="row" -->

  <!-- modal for editing rows -->
  <div class="row">
    <div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editModalLabel" style="display: none;" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="editModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body" id="editModalBody">
            this is where the body content goes...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

But I can't do it this way because I have to fetch the data to edit with AJAX and populate the body of the modal before I display it. Can anyone clue me in to what I need to do to eliminate the error?

Solution

This appears to be due to the fact that I'm launching the modal via javascript with the onclick event.

This is not correct.

The problem occurs because you are using the data-bs-toggle="modal" attribute without specifying what the target is.

If you try to remove the onclick attribute from the button the problem still exist.

<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal">Edit</button>

Just remove the data-bs-toggle="modal" attribute from the edit button and use onclick only.

<button type="button" class="btn btn-outline-secondary btn-sm" onclick="loadEditModal(8)">Edit</button>

I hope it helps