popover bootstrap: załaduj zawartość z ajaxem

Question

Mam problem z ponownym załadowaniem zawartości programu ładującego z ajaxem. Oto kod: http://pastie.org/3960102

Drugie żądanie ajaxowe (po kliknięciu na "a.close") zwraca zaktualizowaną treść (widzę ją w konsoli), ale nie jest załadowane wewnątrz popover.

Rozglądałem się za rozwiązaniami, żaden z nich nie działa.

Co jeszcze mogę spróbować? Dziękuję

Answer 1

Ten sam problem, rozwiązuję go za pomocą tej sztuczki, kod jest szczegółowy i jest tylko przykładowy, zoptymalizuj go!

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

Przypuszczam, że sztuczka jest taka sama, aby odświeżyć tytuł również.

Jeśli masz lepsze rozwiązanie, powiedz mi!

EDIT:

kontynuowałem dochodzenie,

widzimy na kodzie wtyczki:

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 
    } 

tak, zawartość zostanie podjęta na węźle "danych zawartości" lub w opcji podanych w pierwsze wywołanie (instanciation) popover.

Ale, faktycznie, jest probleme, opcje są buforowane i nie odświeżać na każde wezwanie, więc trzeba użyć wa:

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

I Bootstrap się w ciekawy sposób.

samo za tytuł:

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 
    } 

Więc funkcja doPopover mogą być: fine

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

praca dla mnie.

Answer 2

Zamiast resetować atrybut data-content, masz bezpośredni dostęp do zawartości podpowiedzi.

Wymień następujący wiersz:

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

z tym kodem robocza:

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

Aktualizacja 2012

Jak Pigueiras wskazał w swoim komentarzu, że zniszczy domyślnego szablonu na popover.Lepszym rozwiązaniem jest, aby zastąpić zawartość .popover-content:

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

Aktualizuj 2016

Dzięki innym komentarzu, tutaj jest kod roboczych dla Bootstrap 3:

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

Answer 3

Dlaczego empty() i następnie append() kiedy można po prostu wymienić?

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

EDIT:

Również pierwsze podejście jest poprawny i działa dobrze (Bootstrap 2.1) gdy popover jest już zainicjowany i chcesz zmienić zawartość w locie. Po prostu trzeba zadzwonić 'show' ponownie za popover odświeżania (zawartość i położenie):

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

Answer 4

Prace tworzą mnie: Inizialize popover na dokumencie gotowy (danych jest JSON z HTML i wielkości elementu znaleziono)

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

} 

});

W przypadku wyzwalania popover Musisz kolejno przełączać popover (pokaż lub ukryj zamiast), upewnij pusty popover-content i wreszcie dołączyć 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

Po poszukiwaniu godzin, I zdobione na zewnątrz. W Bootstrap 3 możesz użyć poniższego kodu. Inne odnośniki: https://github.com/twbs/bootstrap/issues/11528 i Bootstrap popover content cannot changed dynamically if($element.data('bs.popover')) { $element.data('bs.popover').options.content = 'NEW CONTENT'; }