bootstrap popover: recargar el contenido con ajax

Question

Tengo problemas para volver a cargar el contenido de un popover bootstrap con ajax. Aquí hay algo de código: http://pastie.org/3960102

La segunda petición ajax (cuando hago clic en "a.close") devuelve un contenido actualizado (lo puedo ver en la consola), pero no se carga en el interior del popover.

He buscado soluciones, ninguna de ellas parece funcionar.

¿Qué más puedo probar? Gracias

Answer 1

Mismo problema, lo resuelvo con este truco, el código es detallado y solo un ejemplo, ¡optimícelo!

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

Supongo que el truco es el mismo para actualizar el título también.

Si tiene una mejor solución, por favor dígame!

EDIT:

continué investigación,

podemos ver en código 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, el contenido se toma en attr "datos de contenido", o sobre las opciones dadas en la primera llamada (instanciación) de popover.

Pero, en realidad, es probleme, las opciones están en caché y no actualiza en cada llamada, por lo que tienen que utilizar wa:

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

Y Bootstrap obtener la forma attr.

Lo mismo para el título:

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 
    } 

Por lo tanto, la función doPopover podrían ser: bien

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

trabajo para mí.

Answer 2

En lugar de restablecer el atributo data-content, puede acceder directamente al contenido de la información sobre herramientas de popover.

reemplazar la siguiente línea:

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

con este código de trabajo:

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

Actualización 2012

Como Pigueiras señaló en su comentario, que destruiría la plantilla predeterminada para el popover.Una mejor solución es reemplazar el contenido de .popover-content:

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

Actualizar 2016

Gracias a otro comentario, aquí está el código de trabajo para Bootstrap 3:

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

Answer 3

Por qué empty() y luego append() cuando puede simplemente reemplazar?

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

EDIT:

Además, el primer enfoque es correcto y funciona bien (en arranque 2.1) cuando popover ya se ha inicializado y desea cambiar el contenido sobre la marcha. Sólo tienes que llamar 'show' de nuevo para el popover para refrescar (contenido y posición):

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

Answer 4

Este trabajo me formulario: Inizialize popover en el documento listo (datos es un JSON con HTML y el tamaño del elemento que se encuentra)

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

} 

});

En el evento de disparo de popover se debe, en la secuencia de cambio popover (mostrar u ocultar en su lugar), hacen popover-contenido vacío y finalmente añadir 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

Después de la búsqueda horas, pensé que fuera. Para Bootstrap 3, puede usar el código a continuación. Más referencias son: https://github.com/twbs/bootstrap/issues/11528 y Bootstrap popover content cannot changed dynamically if($element.data('bs.popover')) { $element.data('bs.popover').options.content = 'NEW CONTENT'; }