Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap popover content cannot changed dynamically

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?

like image 741
Aravindhan Avatar asked Nov 26 '12 12:11

Aravindhan


1 Answers

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

like image 58
David Hellsing Avatar answered Sep 18 '22 11:09

David Hellsing