Error Opening Bootstrap Modal With JavaScript

Question

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/[email protected]/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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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?

fmineo · Accepted Answer · 2023-02-09 20:38:13Z

2

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

edited Feb 9, 2023 at 20:38

answered Feb 9, 2023 at 20:26

fmineo

8243 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error Opening Bootstrap Modal With JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related