bootstrap popover：用ajax重新加載內容

Question

我無法用ajax重新加載啓動popover的內容。 下面是一些代碼：http://pastie.org/3960102

第二Ajax請求（當我點擊「a。關閉」）返回一個更新的內容（我可以看到它在控制檯），但它沒有加載酥料餅內。

我四處尋找解決方案，他們都沒有工作。

我還能試試嗎？ 謝謝

Answer 1

同樣的問題，我用這個技巧解決它，代碼是冗長的，只是一個例子，優化它！

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

我想訣竅是相同的刷新標題也。

如果你有更好的解決方案，請告訴我！

編輯：

我繼續調查，

我們可以在插件代碼，請參閱：

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 
    } 

因此，內容採取ATTR 「數據內容」，或在給定的選項popover的第一個調用（instanciation）。

但是，實際上，probleme是，選項緩存並在每次調用不會刷新，所以WA必須使用：

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

和引導得到ATTR方式。

同爲標題：

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 
    } 

所以，doPopover功能可能是：

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

工作對我罰款。

Answer 2

而不是重置data-content屬性，您可以直接訪問彈出式工具提示內容。

替換以下行：

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

這個工作代碼：

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

更新2012

由於Pigueiras在他的評論中指出，這將破壞默認模板爲popover。一個更好的解決方案是更換的.popover-content內容：

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

更新2016

由於另一評論，這裏是引導3的工作代碼：

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

Answer 3

爲什麼empty()和那麼append()什麼時候可以替換？

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

編輯：

而且，第一種方法是正確的，工作正常（引導2.1）時酥料餅已經被初始化並且要動態更改的內容。你只需要再次調用'show'爲酥料餅刷新（內容和位置）：

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

Answer 4

這項工作形成了我：在文件準備 Inizialize酥料餅（數據與HTML和元素的大小JSON找到）

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

} 

}）;

在酥料餅，你必須按順序的觸發事件切換酥料餅（顯示或隱藏代替），使酥料餅的內容爲空，最後追加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

後小時的搜索，我想它出。對於Bootstrap 3，您可以使用下面的代碼。更多的參考資料包括： https://github.com/twbs/bootstrap/issues/11528和Bootstrap popover content cannot changed dynamically if($element.data('bs.popover')) { $element.data('bs.popover').options.content = 'NEW CONTENT'; }