Question

我正在尝试创建一个包含AJAX请求结果的引导模式。

我的引导代码如下

{{--Bootstrap modal--}}
<div id="exampleModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Electronic mail title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Electronic mail body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

还有一个按钮，您可以看到它的HREF属性调用了要通过AJAX调用的路径。

<a href="api/myroute/someID" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Preview Reminder</a>

我编写了后端代码，它返回来自api / myroute / someID

的内容

到目前为止，前端代码是从bootstraps文档中复制/粘贴的示例代码，后端代码是我自己的。

下一步是编写一些Javascript，它将AJAX调用的内容带到api / myroute / someID并将其放在模态窗口中。

问题在于虽然我还没有忘记这个代码从此路线返回的内容将自动放置在模态窗口中。

然而，这只能正常工作一次。打开第二个模态窗口并放置一个不同的＆＃34; someID＆＃34;在路径的末尾（因此它返回不同的数据）导致模态窗口包含第一个AJAX调用的结果。

我有两个问题。

1）这是如何工作的？ 2）如何在每次打开时刷新模态的内容

Answer 1

Bootstrap 3模态具有以下功能：如果开始元素具有href属性，则模态将填充href属性所做的http请求的响应。

此功能已从bootstrap 4中删除。这仅适用于同一模型窗口。

Bootstrap模态窗口自动接收AJAX的内容

1 个答案: