bootstrap popover: ajax ile içeriği yeniden yükle

Question

Ajax ile bir bootstrap popover içeriğini yeniden yükleme konusunda sorun yaşıyorum. İşte bazı kod: http://pastie.org/3960102

ikinci ajax isteği (I "a.close" tıkladığınızda) güncellenmiş içeriği döndürür (ı konsolunda o görebilir) ama popover içeride yüklü değil.

Çözüme baktım, bunların hiçbiri işe yaramıyor.

Başka neler deneyebilirim? Bu hile ile çözmeye, size

Answer 1

aynı sorunu ederiz, kodu, kapsamlı ve sadece bir exemple, optimize!

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

Ayrıca, hile de başlığı yenilemek için aynı olduğunu varsayalım.

Daha iyi bir çözümün varsa, plz söyle!

DÜZENLEME: soruşturması devam

,

biz eklenti koduna görebilirsiniz

:

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 
    } 

yüzden, içerik attr "veri-içerik" alınır ya verilen seçeneklere popletin ilk çağrısı (instanciation).

Ama aslında, probleme olan, seçenekler yüzden wa kullanmak zorunda önbelleğe ve her çağrıda yenilemek değildir:

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

Ve attr yol almak Bootstrap. başlık için aynı

:

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 
    } 

Yani, doPopover fonksiyonu olabilir: Benim için

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

Çalışma cezası. Bunun yerine data-content özelliğini sıfırlama

Answer 2

doğrudan popover ipucu içeriğe erişmek mümkün.

aşağıdaki satırı değiştirin: Bu çalışma kodu ile

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

: Pigueiras olarak 2012

onun yorumunda işaret

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

Güncelleme, varsayılan şablonu yok edeceğini popover için.Daha iyi bir çözüm .popover-content içeriğini değiştirmektir:

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

Güncelleme 2016

Teşekkür başka bir yoruma, burada Bootstrap 3 işçi kodudur:

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

Answer 3

Neden empty() ve o zaman sadece değiştirebilirsin append()?

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

DÜZENLEME:

Ayrıca birinci yaklaşım doğrudur ve popover zaten başlatılmış ve anında içeriğini değiştirmek istediğiniz zaman (2.1 bootstrap) çalışıyor. Sadece yenilemek için popover (içerik ve konum) için tekrar 'show' aramak zorunda:

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

Answer 4

Bu iş beni oluştururlar: Hazır belge üzerinde Inizialize popover (veri bulunamadı HTML ve elemanın boyutu ile bir json olan)

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

} 

}); Eğer sırayla gerekir popover tetikleyicisi olayda

popover (gösterisini veya onun yerine gizlemek) geçiş saatlik aramadan sonra 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

ekleme nihayet, boş popover-rızasını kazanmak ve, bunu anladım dışarı. Bootstrap 3 için aşağıdaki kodu kullanabilirsiniz. Daha referansları aşağıdaki gibidir: https://github.com/twbs/bootstrap/issues/11528 ve Bootstrap popover content cannot changed dynamically if($element.data('bs.popover')) { $element.data('bs.popover').options.content = 'NEW CONTENT'; }