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?
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);
Demo: http://jsfiddle.net/44RvK
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With