Question

我想通过ajax调用中的html设置Bootstrap4 popover的内容。

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调用完成后，内容仍显示为“正在加载...”，而当我第二次单击时，将显示正确的数据。

我还尝试了在成功处理程序中使用jQuery定位div，但这没有用，因为Bootstrap4尚未将弹出窗口添加到DOM中。

Answer 1

我敢肯定我已经很晚了，但是对于最新的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 2

对于其他任何被卡住的人，我添加了一些自定义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);                            
        }
    });
});

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

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

3 个答案: