popover bootstrap: ricarica il contenuto con ajax

Question

Ho problemi a ricaricare il contenuto di un popover bootstrap con ajax. Ecco po 'di codice: http://pastie.org/3960102

La seconda richiesta ajax (quando clicco su "a.close") restituisce un contenuto aggiornato (posso vederlo nella console), ma non è stato caricato all'interno del popover.

Ho cercato soluzioni, nessuna sembra funzionare.

Cos'altro posso provare? Grazie

Answer 1

Stesso problema, lo risolvo con questo trucco, il codice è prolisso e solo un esempio, ottimizzalo!

// 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')); 
}); 

Suppongo che il trucco sia lo stesso per aggiornare anche il titolo.

Se avete una soluzione migliore, fatemelo sapere!

EDIT:

ho continuato indagine,

possiamo vedere il codice del plugin:

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 
    } 

modo, il contenuto viene fatta in attr "-contenuto dei dati", o opzioni formulato la prima chiamata (instanciation) del popover.

Ma, in realtà, è probleme, le opzioni vengono memorizzati nella cache e non aggiorna su ogni chiamata, in modo wa devono utilizzare:

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

E il bootstrap ottenere il modo attr.

Lo stesso per titolo:

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 
    } 

Quindi, la funzione doPopover potrebbe essere: bene

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); 
    } 

lavoro per me.

Answer 2

Invece di reimpostare l'attributo data-content, è possibile accedere direttamente al contenuto del tooltip di popover.

Sostituire la seguente riga:

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

con questo codice di lavoro:

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

Aggiornamento 2012

Come Pigueiras sottolineato nel suo commento, che distruggerebbe il modello predefinito per il popover.Una soluzione migliore è quella di sostituire il contenuto di .popover-content:

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

Aggiornamento 2016

Grazie ad un altro commento, ecco il codice di lavoro per Bootstrap 3:

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

Answer 3

Perché empty() e quindi append() quando puoi sostituire?

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

EDIT:

Inoltre, il primo approccio è corretto e funziona bene (bootstrap 2.1) quando popover è già inizializzato e si desidera modificare il contenuto al volo. Devi solo chiamare 'show' ancora per la popover per aggiornare (contenuto e posizione):

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

Answer 4

Questo lavoro mi fanno: Inizialize popover sul documento pronto (dati è un JSON con HTML e le dimensioni dell'elemento trovato)

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

} 

});

Sulla evento di trigger di popover si deve in sequenza alternata del popover (Mostrare o nascondere invece), fanno popover-contenuto vuoto e, infine, aggiungere 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 5

Dopo ore di ricerca, ho pensato che su. Per Bootstrap 3, puoi usare il codice qui sotto. Altri riferimenti sono: https://github.com/twbs/bootstrap/issues/11528 e Bootstrap popover content cannot changed dynamically if($element.data('bs.popover')) { $element.data('bs.popover').options.content = 'NEW CONTENT'; }