使用 Ajax 动态更改 Bootstrap 4 弹出框的内容答案

【问题标题】：Dynamically change content of a Bootstrap 4 popover using Ajax使用 Ajax 动态更改 Bootstrap 4 弹出框的内容
【发布时间】：2019-11-06 00:25:28
【问题描述】：

我想通过 ajax 调用设置带有 html 的 Bootstrap4 弹出框的内容。

有很多适用于 Bootstrap 3 的解决方案，但找不到适用于 Bootstrap 版本 4 的解决方案。

这是我的 HTML：

                <button type="button"
                        id="AlertsBellButton"
                        class="btn btn-lg btn-danger"
                        data-toggle="popover"
                        data-placement="bottom"
                        data-trigger="focus" 
                        title="Alerts"
                        data-html="true"
                        data-content="Loading...">
                    <i class="fal fa-bell"></i>
                </button>

还有我的 Javascript：

$('#AlertsBellButton').on('show.bs.popover', function () {
    $.ajax({
        url: '/Alert/GetAlertsForBell/',
        type: 'get',
        cache: false,
        success: function (data) {

            $('#AlertsBellButton').attr('data-content', data);
        }
    });
});

设置 data-content 属性显然应该可以解决问题；第一次点击铃铛，第一次ajax调用完成后，内容显示“Loading...”，第二次点击，显示正确数据。

我也尝试在成功处理程序中使用 jQuery 定位 div，但这不起作用，因为 Bootstrap4 尚未将弹出框添加到 DOM。

【问题讨论】：

标签： jquery bootstrap-4 popover

【解决方案1】：

对于其他卡住的人，我添加了一些自定义 html 作为带有 id 的内容：

                <button type="button"
                        id="AlertsBellButton"
                        class="btn btn-lg btn-danger"
                        data-toggle="popover"
                        data-placement="right"
                        data-trigger="focus"
                        title="Alerts"
                        data-html="true"
                        data-content="<div id='AlertBellContainer'>Loading...</div>">
                    <span class="sr-only">Notifications</span>
                    <i class="fal fa-bell"></i>
                </button>

然后通过定位自定义 html 在成功处理程序中简单地设置 my 的 html：

$('#AlertsBellButton').on('show.bs.popover', function (e) {
    $.ajax({
        url: '/Alert/GetAlertsForBell/',
        type: 'get',
        cache: false,
        success: function (data) {
            $('#AlertBellContainer').html(data);                            
        }
    });
});

【讨论】：

【解决方案2】：

兄弟，我确定我来晚了，但是使用最新的 jquery，他们使用 jquery 的 attr 函数使其成为可能

检查此示例：

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-trigger="hover" onclick='$("#testing").attr("data-content", "test success");' id="testing" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

如您所见，按下按钮时初始内容发生了变化

【讨论】：

【解决方案3】：

这是我将动态内容加载到弹出框的“数据内容”部分的解决方案。在 Bootstrap 4 中，您可以随意设置样式。

我们使用的 ID 名为“anx-content”。它位于弹出框的“数据内容”内。

按钮或链接：

<a class="anx_open" data-toggle="popover" title="My Content" data-html="true" data-placement="left" data-content="<div id='anx-content'>Loading...</div>" id="anx">Show dynamic popover</a>

带有它的 ajax 注意 '#anx-content' 作为 div 加载内容。

$(".anx_open").click(function() {

    // YOUR DATA STUFF FIRST
    ....
    $.ajax({ 
        type: "POST",
        url: '/your_file_fetching_your_content.',
        data: dataString, 
        success : function(data) { 
            $('#anx-content').html(data);
        },
        error : function(data) { $(".error").show().html('Oops! Something went wrong! The error has been registered into our system and will be solved as soon as possible.'); } 
    });
});

【讨论】：