使用 Ajax 动态更改 Bootstrap 4 弹出窗口的内容

Question

我想通过 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，但这没有用，因为弹出窗口尚未添加到 DOM Bootstrap4.

Answer 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:

在成功处理程序中简单地设置我的 html

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

Answer 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>

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

Answer 3

这是我将动态内容加载到弹出窗口的 'data-content' 部分的解决方案。在 Bootstrap 4 中，您可以随意设置样式。

我们使用的ID名为'anx-content'。它位于弹出窗口的 'data-content' 内。

按钮或link:

<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.'); } 
    });
});

使用 Ajax 动态更改 Bootstrap 4 弹出窗口的内容

Dynamically change content of a Bootstrap 4 popover using Ajax

jquery

popover

bootstrap-4