引导弹出框内容不能动态更改

Posted

技术标签:

【中文标题】引导弹出框内容不能动态更改【英文标题】：Bootstrap popover content cannot changed dynamically 【发布时间】：2012-11-13 22:13:16 【问题描述】：

我使用代码如下：

$(".reply").popover(
  content: "Loading...",
  placement: "bottom"
);

$(".reply").popover("toggle");

正确创建弹出框及其内容。我想在不关闭弹出框的情况下将新数据加载到弹出框中。

我尝试了以下方法：

var thisVal = $(this);
$.ajax(
  type: "POST",
  async: false,
  url: "Getdes",
  data:  id: ID 
).success(function(data) 
  thisVal.attr("data-content", data);
);

在此调用之后，元素中的数据会发生变化，但不会在显示的弹出框中发生变化。

我该怎么做？

【问题讨论】：

您还可以访问弹出框的内部元素并通过 jQuery 更改其中的内容，例如$(".popover-content").html(my_new_content) 【参考方案1】：

如果你像这样抓取弹出框实例：

var popover = $('.reply').data('bs.popover');

然后，要重绘弹出框，请使用.setContent() 方法：

popover.setContent();

浏览源码发现：https://github.com/twitter/bootstrap/blob/master/js/popover.js

因此，在您的示例中，尝试：

thisVal.attr('data-content',data).data('bs.popover').setContent();

更新

setContent() 方法也删除了放置类，所以你应该这样做：

var popover = thisVal.attr('data-content',data).data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);

演示：http://jsfiddle.net/44RvK

【讨论】：

是的，它似乎也删除了放置类，所以只需再次添加该类。查看演示：jsfiddle.net/44RvK 将内容更改为占用更多空间的内容后，弹出框不会重新定位：jsfiddle.net/g4kZS - 仅当它关闭并再次打开时。 最近popover的data标签改了，所以需要用.data('bs-popover')代替.data('popover') .data('bs.popover') 而不是最新版本中的 .data('popover') 如果需要重新定位偏移calculated_offset = popover.getCalculatedOffset( popover.options.placement, popover.getPosition(), popover.$tip[0].offsetWidth, popover.$tip[0].offsetHeight); popover.applyPlacement(calculated_offset, popover.options.placement);有点乱...【参考方案2】：

是的，您可以，实际上尚未提出最简单的方法。

这是我的方式->

    var popover = $('#example').data('bs.popover');
    popover.options.content = "YOUR NEW TEXT";

popover 是一个对象，如果你想了解更多，请在定义后尝试执行 console.log(popover) 看看如何使用它！

编辑

从 Bootstrap 4 alpha 5 开始，数据结构有点不同。您需要使用popover.config.content 而不是popover.options.content

感谢@kfriend 的评论

【讨论】：

一切正常，只需将内容设置为 Yann 指定的内容，然后调用 popover.show()。这是最好的答案“简短，没有副作用可以像其他一些答案一样反击” 我把这个用于popover.options.placement = 'bottom'，谢谢Yann！ .data('bs.popover') 而不是最新版本中的 .data('popover') 在 BS3 为我工作；快速 n' 容易。我认为这是最好的答案。 从 Bootstrap 4 alpha 5 开始，数据结构有点不同。您需要使用popover.config.content 而不是popover.options.content。【参考方案3】：

在引导程序 3 中：

if($el.data('bs.popover')) 
    $el.data('bs.popover').options.content = "New text";

$el.popover('show');

【讨论】：

【参考方案4】：

2012 年的这个答案不适用于 Bootstrap 3 弹出框。我从this question 中提取了一个可行的解决方案：

$("#popover").attr('data-content', '新内容');

【讨论】：

这绝对是我使用引导程序 3 处理特定弹出框的唯一方法。出于某种原因，$("#popover").data('content', 'new content') ;不起作用，所以我最初忽略了这个解决方案。谢谢！ 是的，在 bs3 上，这是我对动态更改的唯一选择 - 谢谢【参考方案5】：

这些解决方案中的大多数实际上对我来说似乎很老套。 Bootstrap 标准文档有一个可以使用的方法destroy。因此，通过某些事件更改内容时，您可以简单地销毁然后重新创建内容。

.popover('destroy')

这会正确地动态加载、刷新和重新渲染弹出框的内容。

【讨论】：

创建弹出框并没有那么复杂，我也很幸运地使用了destroy然后重新创建了弹出框。 这是一个可以加载动态数据的小提琴，但它会闪烁弹出窗口。 jsfiddle.net/dbuj2Lnt/1【参考方案6】：

简单的解决方案

你可以试试这个：

//Bootstrap v3.3.7 var popoverEl = $("#popover"); popoverEl.attr("data-content", "NEW CONTENT"); popoverEl.popover("show");

谢谢。

【讨论】：

这是 Bootstrap 3.x 的正确答案。无需使用setContent()。这适用于字符串或 HTML 内容。 是的，我同意 Bootstrap 3.x 的这一点 调用popoverEl.popover("show") 使我已经可见的弹出框消失:-(。我只是希望它使用新数据在正确的位置正确重新呈现。我使用的是引导程序 3.3.7。跨度> 应该加上***.com/questions/19974559/…。谢谢:)【参考方案7】：

我使用@David和@Sujay sreedhar的回答解决了这个问题，但是如果在加载新内容的过程中可以看到弹出框，则需要重新定位弹出框：

var popover = thisVal.attr('data-content',data).data('popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
// if popover is visible before content has loaded
if ($(".reply").next('div.popover:visible').length)
    // reposition
    popover.show();

如果它没有重新定位并且新内容具有例如不同的高度，弹出框将向下扩展，箭头将偏离目标！

此外，当随后单击按钮时，它将重新打开弹出框而不是关闭它。上面的代码也解决了这个问题。

演示http://jsfiddle.net/whFv6/

（我的编辑被拒绝了，所以我想我会在这里发布..）

【讨论】：

【参考方案8】：

popover正确初始化后，可以直接用jquery替换class="popover-content"元素：

$(".popover-content").html('a nice new content')

【讨论】：

我喜欢这个想法，但是如果您在页面上初始化了多个弹出框，您将如何更新特定弹出框的内容？【参考方案9】：

你可以将标题作为函数传递

var content = 'Loading...'

function dynamicContent()
  return content

$(".reply").popover(
  content: dynamicContent,
  placement: "bottom"
);

$(".reply").popover("toggle");

然后动态改变变量内容。

【讨论】：

【参考方案10】： 
<button data-toggle="popover" data-html="true" data-content='<div id="myPopover">content</div>'>click</button>
$('#myPopover').html('newContent')

这是一种非常干净的方式。

【讨论】：

+1 这完全让我开心，在 $( 'a[data-toggle="popover"]' ).on('inserted.bs.popover', function () );事情。【参考方案11】：

我为 bootstrap 3.1.1 编写了一个异步弹出窗口。我刚刚称它为popoverasync。这是一个演示：

async popover demo

您可以在这里下载演示的源代码：

demo source

对我来说，诀窍是编写此异步弹出框的 getContent 方法，以便调用用户检索内容的 javascript 函数，但 getContent 将同步返回等待动画，返回给调用者的getContent。这样，弹出框无论哪种方式都有内容。首先是在用户等待的时候，最后是在内容到达的时候。我所指的可以在演示源的extensions.js 中找到：

希望对您有所帮助！

丹

【讨论】：

我使用了异步弹出窗口，发现如果我使用 ajax，ajax 会被触发两次。首先在 .hasContent() 检查期间，然后在 .setContent() 期间检查。有没有办法阻止这一切？ 请创建一个 Github 存储库来记录问题。【参考方案12】：

HTML

<a data-toggle="popover" popover-trigger="outsideClick" title="Indicadores" data-content="" data-html="true" class="Evaluar" id="alun codigo"><span><i class="fa fa-check"></i>algun nombre</span></a>

JQUERY

$('a.Evaluar').on('click', function () 
    var a=$(this);//.attr('data-content', "mañana");
    $.ajax(
        url: "../IndicadorControlador?accion=BuscarPorProceso&cP=24",
        type: 'POST',
        dataType: 'json'
    )
            .done(function (response) 
                //alert("done. ");
                var ind = "";
                $(response).each(function (indice, elemento) 
                    //alert(elemento.strIdentificador);
                    //console.log('El elemento con el índice ' + indice + ' contiene ' + elemento.strIdentificador.toString());
                    ind += '<a href=#>'+elemento.strIdentificador.toString()+'</a>';
                );
              $(a).attr('data-content', ind);
            )
            .fail(function () 
                sweetAlert("ERROR!", " Algo salió mal en el controlador!", "error");
            )
            .complete(function () 
            );

    $('[data-toggle="popover"]').popover();
);

【讨论】：

【参考方案13】：

启用弹出框后，即使数据发生更改，它也会保留其先前的版本（如果已创建）。您需要销毁以前的版本以允许再次创建新的弹出框。 在 Bootstrap 4.x 中通过

.popover('dispose')

只要通过 ajax 调用发生数据更改，就执行此操作。

【讨论】：

【参考方案14】：

对于 Boostrap v4.3

以下代码在弹出框内容显示之前更新它：

// When the popover is show
$('.my-popover').on('show.bs.popover', function () 
  // Update popover content
  $(this).attr('data-content', 'New content');
)

在这个JSFiddle上在线测试。

【讨论】：

弹出窗口甚至不会在小提琴中切换，这不会实时更新它，它会在弹出窗口关闭并再次打开时工作。 这是我正在使用的解决方案。 ***.com/a/62228583/5420070【参考方案15】：

使用bootstrap 4.6 我正在使用此代码对其进行更新：

$("#disk-usage-details").attr("data-content", "your new content to here");

所有其他人都不适合我。

【讨论】：

以上是关于引导弹出框内容不能动态更改的主要内容，如果未能解决你的问题，请参考以下文章

自动隐藏引导弹出框[关闭]

Bootstrap 弹出框更改 html 内容

我可以动态更改引导弹出窗口标题样式吗

使引导弹出框在悬停而不是单击时出现/消失

在表格中悬停几次后，引导弹出窗口停止

容器移动时的引导弹出位置