动态更改 Bootstrap 弹出窗口的模板

Question

我查看了 this question，其中询问了有关动态更改 Bootstrap 弹出窗口内容的问题。但是解决方案似乎并不适合我的情况，我想在用户每次按下按钮时通过直接更改数据模板来显示我的弹出窗口时向他们显示新数据。

这是我的 .js 代码：

$(function () {
myUrl = "" + window.location.protocol + "//" + window.location.host + "/" + "Demo/Notification/LoadingStats";


$.ajax({
    url: myUrl,
    type: 'GET',
    success: function (data) {
        $('[data-toggle="popover"]').popover({
        template: data
        });
    }

})

上面的代码是我目前的工作代码，它正确显示了我想要的数据，但不会流畅地改变，也不会在用户打开它时改变。只有当页面重新加载时，数据才会更新。

下面的代码是我根据上面链接的参考更改数据模板的无效尝试。根据我放入其中的警报和调试器，它似乎正在触发，但似乎什么也没做（它甚至不显示一次弹出窗口）

我什至尝试过使用 setInterval(myfunction, 2000);

$('[data-toggle="popover"]').on('show.bs.popover', function () {

    $.ajax({
        url: myUrl,
        type: 'GET',
        success: function (data) {
            $('[data-toggle="popover"]').popover({
                template: data
            });
        }

    })
    });
    //these following three lines are firing correctly, just not doing what I want (refreshing the popover)
    var popover = $('[data-toggle="popover"]').data('bs.popover');
    popover.setContent();
    popover.$tip.addClass(popover.options.placement);
})

});

关于我可能做错了什么的任何想法，或者如何动态更改弹出窗口的数据模板？

更新

我一直忽略了 data-html="true" 属性，这就是为什么我一直认为我必须使用数据模板而不是数据内容。您不能动态更新数据模板，但您完全可以动态更新数据内容。我希望这能帮助那些忽视数据的人-html.

Answer 1

我一直忽略了 data-html="true" 属性，这就是为什么我一直认为我必须使用 data-template 而不是 data-content 的原因。您不能动态更新 data-template，但您完全可以动态更新 data-content。我希望这对那些忽视了 data-html.

的人有所帮助

动态更改 Bootstrap 弹出窗口的模板

Dynamically altering the template for a Bootstrap popover

javascript

jquery

twitter-bootstrap

popover