bootstrap popover: reload content with ajax

Question

I'm having trouble reloading content of a bootstrap popover with ajax. Here's some code: http://pastie.org/3960102

The second ajax request (when I click on "a.close") returns an updated content (I can see it in the console), but it is not loaded inside the popover.

I looked around for solutions, none of them seem to work.

What else can I try? Thank you

Answer 1

This work form me: Inizialize popover on document ready (data is a json with HTML and size of element found)

     $.ajax({
url: "/alpha/annuncio/scegliGestione",
success: function (data) {
    $('#notifiche').popover(
        {
            title:"Le tue notifiche",
            placement:'bottom',
            trigger:'manual'
        });
    $('#notifiche').find(".badge").text(data.size);

}

});

On the trigger event of popover you must in sequence toggle the popover (show or hide instead), make popover-content empty and finally append data.html

$("#notifiche").click(function(){

     $.get("/alpha/annuncio/scegliGestione", function(data) {
         $('#notifiche').popover('toggle')
         $("body").find('.popover-content').empty()
         $("body").find('.popover-content').append(data.html);

         $('#notifiche').find(".badge").text(data.size);
     });
    /* */

 });

Answer 2

Same problem, I resolve it with this trick, the code is verbose and just an exemple, optimize it !

// functions container
var doc = 
{
    doPopover : function( item_id, title, content )
    {
        // get jq item
        var item = $('#' + item_id );

        // the trick to "refresh content" in every call
        item.attr('data-content', content);

        // popover
        item.popover(
        {
            title   :   title,
            trigger :   'manual'
        }).popover('show');
    },

    popoverFirstCall : function()
    {
        this.doPopover('myDiv', 'Title', 'MyContent1');
    },

    popoverSecondCall : function()
    {
        var content = 'xxx'; // get the content in Ajax

        this.doPopover('myDiv', 'Title', content);
    }
}

// call funcs in your views
$(document).ready(function()
{
    // first popover with first content
    doc.popoverFirstCall();

    // this event wich call the ajax content and refresh popover. 
    $('#button').on('click', $.proxy(doc, 'popoverSecondCall'));
});

I suppose the trick is the same to refresh title also.

If you have a better solution, plz tell me !

EDIT :

I continued investigation,

we can see on plugin code :

getContent: function () {
      var content
        , $e = this.$element
        , o = this.options

      content = $e.attr('data-content')
        || (typeof o.content == 'function' ? o.content.call($e[0]) :  o.content)

      return content
    }

so, content is taken on attr "data-content", or on options given at the first call (instanciation) of popover.

But, actually, probleme is, options are cached and not refresh on every call, so wa have to use :

$('item_id').attr('data-content', 'some content'); // and warning, it is different than
$('item_id').data('content', 'some content');

And bootstrap get the attr way.

Same for title :

getTitle: function () {

      var title
        , $e = this.$element
        , o = this.options

      title = $e.attr('data-original-title')
        || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)

      return title
    }

So, doPopover function could be :

    doPopover : function( item_id, title, content )
    {
        // get jq item
        var item = $('#' + item_id );

        // the trick to "refresh content" in every call
        item.attr('data-content', content); // do not use data() way.
        item.attr('data-original-title', title);

        // popover (trace first call if you want)
        item.popover(
        {
            trigger :   'manual'
        });

        item.popover('show);
    }

Work fine for me.

Answer 3

Instead of resetting the data-content attribute, you are able to directly access the popover tooltip content.

Replace the following line:

t.attr('data-content', r);

with this working code:

t.data('popover').tip().html(r);

Update 2012

As Pigueiras pointed out in his comment, that would destroy the default template for the popover. A better solution is to replace the contents of .popover-content:

t.data('popover').tip().find('.popover-content').empty().append(r);

Update 2016

Thanks to another comment, here is the working code for Bootstrap 3:

t.data('bs.popover').tip().find('.popover-content').empty().append(r);

Answer 4

After hours' search, I figured it out. For Bootstrap 3, you can use code below. More references are: https://github.com/twbs/bootstrap/issues/11528 and Bootstrap popover content cannot changed dynamically if($element.data('bs.popover')) { $element.data('bs.popover').options.content = 'NEW CONTENT'; }

Answer 5

Why empty() and then append() when you can just replace?

t.data('popover').tip().find('.popover-content').html(r);

EDIT:

Also, the first approach is correct and works fine (bootstrap 2.1) when popover is already initialized and you want to change the contents on the fly. You just have to call 'show' again for the popover to refresh (content and position):

t.attr('data-content', r);
t.popover('show');