英文:
Error Opening Bootstrap Modal With JavaScript
问题
I understand that you want a translation for the code-related portions of your text. Here are the code sections translated into Chinese:
我正在开发一个涉及数据库行列表的用户界面部分。每行都是可编辑的，当点击**编辑**按钮时，我的意图是弹出一个模态对话框窗口，通过 AJAX 预加载数据以在表单中编辑特定行，如下图所示。
以下的代码展示了一个可供您测试的工作设置。
```javascript
jQuery(document).ready(function() {
// console.log('已加载播客剧集列表的JavaScript');
// jQuery('#editModal').modal('show');
});
function loadEditModal(rowID) {
console.log("点击了行 " + rowID + "\n");
// 填充模态窗口的内容
// 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">
<!-- 显示编码队列内容的表格 -->
<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">播客</th>
<!-- podcast_code -->
<th scope="col">标题</th>
<th scope="col">Seq.</th>
<th scope="col">状态</th>
<!-- last_action -->
<th scope="col">日期</th>
<!-- last_action_date -->
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>8</td>
<td>bw</td>
<td>建造鸟屋</td>
<td>345</td>
<td>{"error":"none","message":"初始插入","status":"处理中"}</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">编辑</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" onclick="loadEditModal(8)">编辑</button>
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">重新发布</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm">重新发布</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 行的编辑模态框 -->
<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">模态框标题</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
</div>
<div class="modal-body" id="editModalBody">
这里是模态框的内容...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>
</div>
</div>
然而，每当单击编辑按钮以显示模态框时，我在 JavaScript 控制台中会收到以下错误：
未捕获的 TypeError: 无法访问属性 "backdrop"，this._config 未定义
这似乎是因为我通过 JavaScript 使用 onclick 事件启动模态框。如果我稍微更改 HTML 和 JavaScript 如下，并使用按钮的"data-bs-target"属性来打开模态框，就可以正常工作，没有 JavaScript 错误。
jQuery(document).ready(function() {
// console.log('已加载播客剧集列表的JavaScript');
// jQuery('#editModal').modal('show');
});
function loadEditModal(rowID) {
console.log("点击了行 " + 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">
<!-- 显示编码队列内容的表格 -->
<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">播客</th>
<!-- podcast_code -->
<th scope="col">标题</th>
<th scope="col">Seq.</th>
<th scope="col">状态</th>
<!-- last_action -->
<th scope="col">日期</th>
<!-- last_action_date -->
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>8</td>
<td>bw</td>
<td>建造鸟屋</td>
<td>345</td>
<td>{"error":"none","message":"初始插入","status":"处理中"}</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">编辑</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#editModal" onclick="loadEditModal(8)">编辑</button
<details>
<summary>英文:</summary>
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.
[![image of table row][1]][1]
The following code shows a working setup you can play with.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
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();
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
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
[![javascript error][2]][2]
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.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
jQuery(document).ready(function() {
// console.log('podcast episode list js loaded');
// jQuery('#editModal').modal('show');
});
function loadEditModal(rowID) {
console.log("Clicked row " + rowID + "\n");
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
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?
[1]: https://i.stack.imgur.com/q9y8f.png
[2]: https://i.stack.imgur.com/Zyu8X.png
</details>
# 答案1
**得分**: 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 exists.
<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.
<details>
<summary>英文:</summary>
> 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
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论