Bootstrap popover content cannot changed dynamically
JqueryTwitter BootstrapPopoverJquery Problem Overview
I use the code as follows:
$(".reply").popover({
content: "Loading...",
placement: "bottom"
});
$(".reply").popover("toggle");
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:
var thisVal = $(this);
$.ajax({
type: "POST",
async: false,
url: "Getdes",
data: { id: ID }
}).success(function(data) {
thisVal.attr("data-content", data);
});
After this call the data in the element is changed but not in the popover which is shown.
How should i do this?
Jquery Solutions
Solution 1 - Jquery
If you grab the popover instance like this:
var popover = $('.reply').data('bs.popover');
Then, to redraw the popover, use the .setContent()
method:
popover.setContent();
I found out browsing the source: https://github.com/twitter/bootstrap/blob/master/js/popover.js
So, in your example, try:
thisVal.attr('data-content',data).data('bs.popover').setContent();
Update
The setContent()
method also removes the placement class, so you should do:
var popover = thisVal.attr('data-content',data).data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
Solution 2 - Jquery
Yes you can, in fact the easiest way haven't been suggested yet.
Here's my way ->
var popover = $('#example').data('bs.popover');
popover.options.content = "YOUR NEW TEXT";
popover is an object if you want to know more about it, try to do console.log(popover) after you define it to see how you can use it after !
EDIT
As of Bootstrap 4 alpha 5, the data structure is a bit different. You'll need to use popover.config.content
instead of popover.options.content
Thanks to @kfriend for the comment
Solution 3 - Jquery
In bootstrap 3:
if($el.data('bs.popover')) {
$el.data('bs.popover').options.content = "New text";
}
$el.popover('show');
Solution 4 - Jquery
This answer from 2012 does not work with Bootstrap 3 popovers. I extracted a working solution from this question:
> $("#popover").attr('data-content', 'new content');
Solution 5 - Jquery
Most of these solutions actually seem hacky to me. Bootstrap standard docs have a method destroy
that can be used. So, on change of content via some event you can simply destroy and then recreate content.
.popover('destroy')
This properly dynamically loads, refreshes and re-renders the content of the popover.
Solution 6 - Jquery
SIMPLE SOLUTION
You can try with this :
//Bootstrap v3.3.7 var popoverEl = $("#popover"); popoverEl.attr("data-content", "NEW CONTENT"); popoverEl.popover("show");
Thanks.
Solution 7 - Jquery
I solved the problem using @David and @Sujay sreedhar's answer, but if the popover is visible during the new content is loaded, the popover needs to be repositioned:
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();
}
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 http://jsfiddle.net/whFv6/
(My edit was rejected, so I thought I'd post it here..)
Solution 8 - Jquery
After the popover has been correctly initialized, you can directly use jquery to replace the class="popover-content"
element:
$(".popover-content").html('a nice new content')
Solution 9 - Jquery
you can just pass the title as function
var content = 'Loading...'
function dynamicContent(){
return content
}
$(".reply").popover({
content: dynamicContent,
placement: "bottom"
});
$(".reply").popover("toggle");
and then change the variable content dynamically.
Solution 10 - Jquery
<button data-toggle="popover" data-html="true" data-content='<div id="myPopover">content</div>'>click</button>
$('#myPopover').html('newContent')
This is a very clean way.
Solution 11 - Jquery
I wrote an async popover for bootstrap 3.1.1. I just called it popoverasync
. Here is a demonstration:
You can download the source of the demo here:
The trick, for me, was to write the getContent
method of this async popover so the user's javascript function to retrieve the content will be invoked, but getContent
will return a wait animation, synchronously, back to the caller of getContent
. 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 extensions.js
in the demo source:
Hope this helps you!
Dan
Solution 12 - Jquery
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();
});
Solution 13 - Jquery
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
.popover('dispose')
do it whenever there is a change in data through an ajax call.
Solution 14 - Jquery
For Boostrap v4.3
The following code update the popover content just before it is displayed:
// When the popover is show
$('.my-popover').on('show.bs.popover', function () {
// Update popover content
$(this).attr('data-content', 'New content');
})
Test online on this JSFiddle.
Solution 15 - Jquery
With bootstrap 4.6
I am using this code to update it:
$("#disk-usage-details").attr("data-content", "your new content to here");
all others did not work for me.