blocks|key|429495|text|在bootstrap+3中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|429496|if($el.data('bs.popover'))+{
++++$el.data('bs.popover').options.content+=+"New+text";
}
$el.popover('show');|code-block|syntax|javascript|429497|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In bootstrap 3:

<pre><code>if($el.data('bs.popover')) {
 $el.data('bs.popover').options.content = "New text";
}
$el.popover('show');
</code></pre>

blocks|key|429673|text|在我看来，这些解决方案中的大多数实际上都是老生常谈。Bootstrap标准文档有一个可以使用的方法destroy。因此，在通过某些事件更改内容时，您可以简单地销毁内容，然后重新创建内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|429674|.popover('destroy')|code-block|syntax|javascript|429675|这将正确地动态加载、刷新和重新呈现弹出窗口的内容。|429676|entityMap^0|1D|7|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

Most of these solutions actually seem hacky to me. Bootstrap standard docs have a method <code>destroy</code> that can be used. So, on change of content via some event you can simply destroy and then recreate content.

<pre><code>.popover('destroy')
</code></pre>

This properly dynamically loads, refreshes and re-renders the content of the popover.

blocks|key|429456|text|我使用@David和@Sujay+sreedhar的答案解决了这个问题，但是如果在加载新内容的过程中弹出框可见，则需要重新定位弹出框：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|429457|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();
}|code-block|syntax|javascript|429458|如果没有重新定位，并且新内容具有不同的高度，则弹出窗口将向下扩展，箭头将偏离目标！|429459|此外，当按钮被点击后，它将重新打开弹出窗口，而不是关闭它。上面的代码也解决了这个问题。|429460|演示http://jsfiddle.net/whFv6/|429461|(我的编辑被拒绝了，所以我想我应该把它贴在这里。)|429462|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/210578/david|1|https://stackoverflow.com/users/2077829/sujay-sreedhar|2|http://jsfiddle.net/whFv6/^0|3|6|0|A|F|1|0|0|0|0|2|Q|2|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]|$A|16|B|17|1|18]]|C|$]]|$1|D|3|E|5|F|7|19|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|1A|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|1B|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]]]

I solved the problem using <a href="https://stackoverflow.com/users/210578/david">@David</a> and <a href="https://stackoverflow.com/users/2077829/sujay-sreedhar">@Sujay sreedhar</a>'s answer, but if the popover is visible during the new content is loaded, the popover needs to be repositioned:

<pre><code>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();
}
</code></pre>

If it is not repositioned and the new content has e.g. a different height, the popover will expand downwards and the arrow will be off target!

Also, when the button is clicked afterwards it will re-open the popover instead of closing it. The above code solves, that problem too.

Demo <a href="http://jsfiddle.net/whFv6/" rel="nofollow noreferrer">http://jsfiddle.net/whFv6/</a>

(My edit was rejected, so I thought I'd post it here..)

blocks|key|211348|text|popover正确初始化后，可以直接使用jquery替换class="popover-content"元素：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|211349|$(".popover-content").html('a+nice+new+content')|code-block|syntax|javascript|211350|entityMap^0|S|N|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

After the popover has been correctly initialized, you can directly use jquery to replace the <code>class="popover-content"</code> element:

<pre><code>$(".popover-content").html('a nice new content')
</code></pre>

blocks|key|211412|text|您可以将标题作为函数传递|type|unstyled|depth|inlineStyleRanges|entityRanges|data|211413|var+content+=+'Loading...'

function+dynamicContent(){
++return+content
}
$(".reply").popover({
++content:+dynamicContent,
++placement:+"bottom"
});

$(".reply").popover("toggle");|code-block|syntax|javascript|211414|然后动态地改变变量内容。|211415|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

you can just pass the title as function

<pre><code>var content = 'Loading...'

function dynamicContent(){
 return content
}
$(".reply").popover({
 content: dynamicContent,
 placement: "bottom"
});

$(".reply").popover("toggle");
</code></pre>

and then change the variable content dynamically.

blocks|key|429842|text|<button+data-toggle="popover"+data-html="true"+data-content='<div+id="myPopover">content</div>'>click</button>
$('#myPopover').html('newContent')|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|429843|这是一种非常干净的方式。|unstyled|429844|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;button data-toggle="popover" data-html="true" data-content='&lt;div id="myPopover"&gt;content&lt;/div&gt;'&gt;click&lt;/button&gt;
$('#myPopover').html('newContent')
</code></pre>

This is a very clean way.

blocks|key|429606|text|我为bootstrap+3.1.1编写了一个异步弹出窗口。我刚叫它popoverasync。下面是一个演示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|429607|async+popover+demo|429608|您可以在此处下载demo的源代码：|429609|demo+source|429610|对我来说，诀窍是编写这个异步弹出的getContent方法，这样用户检索内容的javascript函数就会被调用，但getContent会同步地向getContent的调用者返回一个等待动画。这样，无论哪种方式，popover都有内容。首先，当用户等待时，最后当内容到达时。我所指的内容可以在extensions.js的演示源码中找到：|429611|希望这对你有帮助！|429612|丹|429613|entityMap|0|LINK|mutability|MUTABLE|url|http://www.dankemper.net/t3/examples/bootstrap-async-popover/|1|http://www.dankemper.net/t3/examples/bootstrap-async-popover.zip^0|X|C|0|0|I|0|0|0|0|B|1|0|H|A|1M|A|21|A|42|D|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|H|3|I|5|6|7|18|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|L|3|M|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|1M|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1N|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]|Z|$5|U|V|W|E|$X|10]]]]

I wrote an async popover for bootstrap 3.1.1. I just called it <code>popoverasync</code>. Here is a demonstration:

<a href="http://www.dankemper.net/t3/examples/bootstrap-async-popover/" rel="nofollow">async popover demo</a>

You can download the source of the demo here:

<a href="http://www.dankemper.net/t3/examples/bootstrap-async-popover.zip" rel="nofollow">demo source</a>

The trick, for me, was to write the <code>getContent</code> method of this async popover so the user's javascript function to retrieve the content will be invoked, but <code>getContent</code> will return a wait animation, synchronously, back to the caller of <code>getContent</code>. This way, the popover has content either way. First, while the user waits, and finally when the content arrives. What I am referring to can be found within <code>extensions.js</code> in the demo source:

Hope this helps you!

Dan

blocks|key|211369|text|HTML|type|unstyled|depth|inlineStyleRanges|entityRanges|data|211370|<a+data-toggle="popover"+popover-trigger="outsideClick"+title="Indicadores"+data-content=""+data-html="true"+class="Evaluar"+id="alun+codigo"><i+class="fa+fa-check">algun+nombre</a>|code-block|syntax|javascript|211371|JQUERY|211372|$('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+'+%2B+indice+%2B+'+contiene+'+%2B+elemento.strIdentificador.toString());
++++++++++++++++++++ind+%2B=+'<a+href=#>'%2Belemento.strIdentificador.toString()%2B'</a>';
++++++++++++++++});
++++++++++++++$(a).attr('data-content',+ind);
++++++++++++})
++++++++++++.fail(function+()+{
++++++++++++++++sweetAlert("ERROR!",+"+Algo+salió+mal+en+el+controlador!",+"error");
++++++++++++})
++++++++++++.complete(function+()+{
++++++++++++});

++++$('[data-toggle="popover"]').popover();
});|211373|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<h3>HTML</h3>

<pre class="lang-html prettyprint-override"><code>&lt;a data-toggle="popover" popover-trigger="outsideClick" title="Indicadores" data-content="" data-html="true" class="Evaluar" id="alun codigo"&gt;&lt;span&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;algun nombre&lt;/span&gt;&lt;/a&gt;
</code></pre>

<h3>JQUERY</h3>

<pre class="lang-js prettyprint-override"><code>$('a.Evaluar').on('click', function () {
 var a=$(this);//.attr('data-content', "mañana");
 $.ajax({
 url: "../IndicadorControlador?accion=BuscarPorProceso&amp;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 += '&lt;a href=#&gt;'+elemento.strIdentificador.toString()+'&lt;/a&gt;';
 });
 $(a).attr('data-content', ind);
 })
 .fail(function () {
 sweetAlert("ERROR!", " Algo salió mal en el controlador!", "error");
 })
 .complete(function () {
 });

 $('[data-toggle="popover"]').popover();
});
</code></pre>

blocks|key|211529|text|启用弹出时，即使数据发生更改，它也会保留以前的版本(如果已经创建)。您需要销毁以前的版本，以允许重新创建新的popover。在Bootstrap+4.x中，通过|type|unstyled|depth|inlineStyleRanges|entityRanges|data|211530|.popover('dispose')|code-block|syntax|javascript|211531|每当通过ajax调用发生数据更改时，就执行此操作。|211532|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

When a popover is enabled, it retains its previous version(if it was created already) even if the data is change. You need to destroy the previous version to allow for the new popover to be created again.
In Bootstrap 4.x do it by

<pre><code>.popover('dispose')
</code></pre>

do it whenever there is a change in data through an ajax call.

blocks|key|430090|text|在bootstrap+4.6中，我使用以下代码来更新它：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|430091|$("#disk-usage-details").attr("data-content",+"your+new+content+to+here");|code-block|syntax|javascript|430092|其他的都不适合我。|430093|entityMap^0|1|D|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

With <code>bootstrap 4.6</code> I am using this code to update it:
<pre><code>$(&quot;#disk-usage-details&quot;).attr(&quot;data-content&quot;, &quot;your new content to here&quot;);
</code></pre>
all others did not work for me.

I use the code as follows:

<pre><code>$(".reply").popover({
 content: "Loading...",
 placement: "bottom"
});

$(".reply").popover("toggle");
</code></pre>

which creates the popover and its content correctly. I want to load a new data into the popover without closing the popover.

I've tried the following:

<pre><code>var thisVal = $(this);
$.ajax({
 type: "POST",
 async: false,
 url: "Getdes",
 data: { id: ID }
}).success(function(data) {
 thisVal.attr("data-content", data);
});
</code></pre>

After this call the data in the element is changed but not in the popover which is shown.

How should i do this?

Bootstrap popover content cannot changed dynamically

我使用的代码如下：$(".reply").popover({  content: "Loading...",  placement: "bottom"});$(".reply").popover("toggle");它正确地创建了弹出窗口及其内容。我想在不关闭弹出窗口的情况下将新数据加载到弹出窗口中。我尝试过以下几种方法：var thisVal = $(this);$.ajax({  type: 

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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