如何更改已显示的引导程序弹出窗口的内容？

Question

我有一个输入两次密码的表单。我检查密码复杂性和一致性，并在附加到INPUT字段的弹出框中显示相应的错误消息：

<a href="#" id="aIdPwd2" data-toggle="manual" data-content="The password entered does not match the one previously entered" data-placement="right" href="#" rel="popover">
<input type="password" id="iIdPwd2" class="fmt1" size="60" value=""/>
</a>

使用此代码：

$("#aIdPwd2").popover({content: msg});

您可以选择动态显示将要显示的消息。但是，一旦显示一次，它将始终保持不变。

我阅读了很多关于这个热门问题的文章并尝试了很多东西（将2个不同的popover附加到相同的输入，更改getElementsByClassName中的内部html（“popover-content”），销毁并重新创建popover，..） ，但到目前为止没有任何成功。

如何更改已经显示的引导程序弹出窗口内容或任何类型的解决方案的解决方案将受到高度赞赏。

Answer 1

在Twitter Bootstrap 3中，我只是更新内容然后调用show。调用show可确保其正确调整大小，然后正确定位。

$(".notes").data("bs.popover").options.content="Content1";
$(".notes").popover("show");
$(".notes").data("bs.popover").options.content="Content2";
$(".notes").popover("show");

如果您使用数据标签显示内容，则需要更新数据标记，因为它优先。例如

$(".notes").attr("data-content","Content1");
$(".notes").popover("show");
$(".notes").attr("data-content","Content2");
$(".notes").popover("show");

我更喜欢第二个选项，因为它不会通过data(bs.popover) 来访问内部，但第一个选项要快得多，因为它不会更新dom。所以选择浮在你船上的东西。

Answer 2

document.getElementsByClassName("popover-content")[0].innerHTML = 'something else';

确定这不起作用？

在this page上尝试了它，它按预期工作。

UPDATE：只有在弹出窗口可见时它才会起作用，因为每次mouseover / mouseout事件都会重新创建/销毁该元素

我想这不是最好的解决方案，但你可以这样做：

var msg = 'ben123 is not a goddamn password!';

document.getElementById('password').addEventListener('mouseover', function() {  
    document.getElementsByClassName("popover-content")[0].innerHTML = msg; 
});

并在需要时更改msg

Answer 3

依赖于popover('show')的解决方案的问题在于，如果您在show事件的事件处理程序中执行此操作，则最终会出现无限循环。

如果您只是想在显示的popover 中显示某些内容，则需要直接修改DOM：

$("#aIdPwd2").next(".popover").find(".popover-content").html(msg);

例如，如果您想要一个将从API加载一些数据并在悬停时在popover的内容中显示该数据的popover：

DOM：

<a href="#" id="myPopover" data-toggle="popover" data-title="Details" data-api-parameter="someValue">Hover here for details</a>

jQuery的：

$("#myPopover").popover({
    trigger: 'hover'
}).on('shown.bs.popover', function () {
    var popover = $(this);
    var contentEl = popover.next(".popover").find(".popover-content");
    // Show spinner while waiting for data to be fetched
    contentEl.html("<i class='fa fa-spinner fa-pulse fa-2x fa-fw'></i>");

    var myParameter = popover.data('api-parameter');
    $.getJSON("http://api.example.com", {
        'apiParameter': myParameter
    }).done(function (data) {
        var result = data['apiReturnValue'];
        contentEl.html(result);
    }).fail(function (data) {
        result = "No info found.";
        contentEl.html(result);
    });
});

当然，这假设您信任api.example.com提供的数据。如果没有，您可能希望转义返回的数据以缓解XSS攻击。

Answer 4

要替换元素上popover的内容，请先调用destroy。 在Bootstrap 3.1.1上测试

$("#aIdPwd2").popover('destroy').popover({content: msg});