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\"

Answer 1

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.