动态更改 Bootstrap 弹出框的模板

Posted 2023-05-08

【中文标题】动态更改 Bootstrap 弹出框的模板

【英文标题】：Dynamically altering the template for a Bootstrap popover

【发布时间】：2018-07-26 18:10:29

【问题描述】：

我查看了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" 属性，这就是为什么我一直认为我必须使用数据模板而不是数据内容。您不能动态更新数据模板，但您完全可以动态更新数据内容。我希望这对那些忽略 data-html 的人有所帮助。

【参考方案1】：

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