Denediğim şeyin uygun parçaları burada:
<a href="#" data-content="<div id='my_popover'></div>"> Click here </a>
$(".button").popover({html: true})
$(".button").click(function(){
$(this).popover('show');
$("#my_popover").load('my_stuff')
})
Tıkladığımda, isteğin yapıldığını görüyorum, ancak açılır pencereyi doldurmuyorum. Açılır bilgi penceresinin HTML'sinin DOM'a eklendiğini bile görmüyorum, ancak bu sorun giderme olabilir.
Bunu deneyen oldu mu?
'shown.bs.popover'işleyicide okuyun : stackoverflow.com/a/39028723/1371408
Yanıtlar:
Çalışma çözümü için blog yazıma bakın: https://medium.com/cagataygurturk/load-a-bootstrap-popover-content-with-ajax-8a95cd34f6a4
Öncelikle, bir açılır pencere eklemek istediğiniz öğelere bir veri-poload özelliği eklemeliyiz. Bu özelliğin içeriği, yüklenecek url olmalıdır (mutlak veya göreceli):
<a href="#" title="blabla" data-poload="/test.php">blabla</a>
Ve JavaScript'te, tercihen bir $ (belge) .ready ();
$('*[data-poload]').hover(function() {
var e=$(this);
e.off('hover');
$.get(e.data('poload'),function(d) {
e.popover({content: d}).popover('show');
});
});
off('hover')verilerin birden fazla yüklenmesini engeller vepopover()yeni bir fareyle üzerine gelme olayını bağlar. Verilerin her fareyle üzerine gelme olayında yenilenmesini istiyorsanız, kapalıyı kaldırmalısınız.Lütfen örneğin çalışan JSFiddle bölümüne bakın .
htmlözelliğini olarak trueayarlayabilir, ardından contentözelliği gibi bir iframe HTML etiketine ayarlayabilirsiniz content: '<iframe src="http://www.google.com"></iframe>'. Ayrıca max-widthaçılır pencerenizin özelliğini CSS kullanarak geçersiz kılmanız ve büyük olasılıkla CSS kullanarak iframe stilini kaldırmanız gerekir.
e.off('hover')yöntemi kullanabilirsiniz
Benim için iyi çalışıyor:
$('a.popup-ajax').popover({
"html": true,
"content": function(){
var div_id = "tmp-id-" + $.now();
return details_in_popup($(this).attr('href'), div_id);
}
});
function details_in_popup(link, div_id){
$.ajax({
url: link,
success: function(response){
$('#'+div_id).html(response);
}
});
return '<div id="'+ div_id +'">Loading...</div>';
}
Tüm bu çözümleri okuduktan sonra, senkronize bir ajax çağrısı kullanırsanız çözümün çok daha kolay hale geldiğini düşünüyorum . Daha sonra aşağıdaki gibi bir şey kullanabilirsiniz:
$('#signin').popover({
html: true,
trigger: 'manual',
content: function() {
return $.ajax({url: '/path/to/content',
dataType: 'html',
async: false}).responseText;
}
}).click(function(e) {
$(this).popover('toggle');
});
async: falsebunu benim için öldürür
En popüler cevabı güncelledim. Ancak değişikliklerimin onaylanmaması durumunda buraya ayrı bir cevap yazıyorum.
Farklılıklar:
Öncelikle, bir açılır pencere eklemek istediğiniz öğelere bir veri-poload özelliği eklemeliyiz. Bu özelliğin içeriği, yüklenecek url olmalıdır (mutlak veya göreceli):
<a href="#" data-poload="/test.php">HOVER ME</a>
Ve JavaScript'te, tercihen bir $ (belge) .ready ();
// On first hover event we will make popover and then AJAX content into it.
$('[data-poload]').hover(
function (event) {
var el = $(this);
// disable this event after first binding
el.off(event);
// add initial popovers with LOADING text
el.popover({
content: "loading…", // maybe some loading animation like <img src='loading.gif />
html: true,
placement: "auto",
container: 'body',
trigger: 'hover'
});
// show this LOADING popover
el.popover('show');
// requesting data from unsing url from data-poload attribute
$.get(el.data('poload'), function (d) {
// set new content to popover
el.data('bs.popover').options.content = d;
// reshow popover with new content
el.popover('show');
});
},
// Without this handler popover flashes on first mouseout
function() { }
);
off('hover')verilerin birden fazla yüklenmesini engeller ve popover()yeni bir fareyle üzerine gelme olayını bağlar. Verilerin her fareyle üzerine gelme olayında yenilenmesini istiyorsanız, kapalıyı kaldırmalısınız.
Lütfen örneğin çalışan JSFiddle bölümüne bakın .
Çağatay Gürtürk kodunun bir varyasyonu, bunun yerine delege işlevini kullanabilir ve açılır pencereyi hoverout'ta gizlemeye zorlayabilirsiniz.
$('body').delegate('.withajaxpopover','hover',function(event){
if (event.type === 'mouseenter') {
var el=$(this);
$.get(el.attr('data-load'),function(d){
el.unbind('hover').popover({content: d}).popover('show');
});
} else {
$(this).popover('hide');
}
});
Çağatay Gürtürk'ün çözümü güzel ama ben Luke The Obscure'un anlattığı tuhaflığı yaşadım:
Ajax yüklemesi çok uzun sürdüğünde (veya fare olayları çok hızlı olduğunda), açılır pencerenin açık kalmasına neden olan belirli bir öğede .popover ('göster') ve .popover ('gizle') yok.
Bu büyük ön yükleme çözümünü tercih ettim, tüm açılır bilgi içeriği yüklenir ve olaylar, normal (statik) açılır pencerelerde olduğu gibi önyükleme tarafından işlenir.
$('.popover-ajax').each(function(index){
var el=$(this);
$.get(el.attr('data-load'),function(d){
el.popover({content: d});
});
});
2015'te bu en iyi cevap
$('.popup-ajax').mouseenter(function() {
var i = this
$.ajax({
url: $(this).attr('data-link'),
dataType: "html",
cache:true,
success: function( data{
$(i).popover({
html:true,
placement:'left',
title:$(i).html(),
content:data
}).popover('show')
}
})
});
$('.popup-ajax').mouseout(function() {
$('.popover:visible').popover('destroy')
});
Başka bir çözüm:
$target.find('.myPopOver').mouseenter(function()
{
if($(this).data('popover') == null)
{
$(this).popover({
animation: false,
placement: 'right',
trigger: 'manual',
title: 'My Dynamic PopOver',
html : true,
template: $('#popoverTemplate').clone().attr('id','').html()
});
}
$(this).popover('show');
$.ajax({
type: HTTP_GET,
url: "/myURL"
success: function(data)
{
//Clean the popover previous content
$('.popover.in .popover-inner').empty();
//Fill in content with new AJAX data
$('.popover.in .popover-inner').html(data);
}
});
});
$target.find('.myPopOver').mouseleave(function()
{
$(this).popover('hide');
});
Buradaki fikir ile manuel popover görüntülenmesini tetikleyecek olan MouseEnter & mouseLeave olaylar.
Açık MouseEnter Öğenize için oluşturulan hiçbir popover (orada eğer olduğunu if ($ (this) .data ( 'popover') == null) ) oluşturun. İlginç olan, popover () işlevine argüman ( şablon ) olarak ileterek kendi PopOver içeriğinizi tanımlayabilmenizdir . Html parametresini de true olarak ayarlamayı unutmayın .
Burada sadece popovertemplate adlı gizli bir şablon oluşturup JQuery ile klonladım. Kimlik özelliğini klonladıktan sonra silmeyi unutmayın, aksi takdirde DOM'da yinelenen kimliklerle karşılaşırsınız. Ayrıca , şablonu sayfada gizlemek için style = "display: none" olduğuna dikkat edin.
<div id="popoverTemplateContainer" style="display: none">
<div id="popoverTemplate">
<div class="popover" >
<div class="arrow"></div>
<div class="popover-inner">
//Custom data here
</div>
</div>
</div>
</div>
Oluşturma adımından sonra (veya zaten oluşturulmuşsa), popOver'ı $ (this) .popover ('show');
Sonra klasik Ajax çağrısı. Başarı durumunda, sunucudan yeni yeni veriler koymadan önce eski açılır bilgi içeriğini temizlemeniz gerekir . Mevcut açılır bilgi içeriğini nasıl alabiliriz? İle .popover.in selektör! .İn sınıf popover anda burada hile olduğunu, görüntülendiğini gösterir!
Bitirmek için, üzerinde mouseLeave olay, sadece popover gizlemek.
İşte ajax yüklü içerikle de iyi çalışan çözümüm.
/*
* popover handler assigned document (or 'body')
* triggered on hover, show content from data-content or
* ajax loaded from url by using data-remotecontent attribute
*/
$(document).popover({
selector: 'a.preview',
placement: get_popover_placement,
content: get_popover_content,
html: true,
trigger: 'hover'
});
function get_popover_content() {
if ($(this).attr('data-remotecontent')) {
// using remote content, url in $(this).attr('data-remotecontent')
$(this).addClass("loading");
var content = $.ajax({
url: $(this).attr('data-remotecontent'),
type: "GET",
data: $(this).serialize(),
dataType: "html",
async: false,
success: function() {
// just get the response
},
error: function() {
// nothing
}
}).responseText;
var container = $(this).attr('data-rel');
$(this).removeClass("loading");
if (typeof container !== 'undefined') {
// show a specific element such as "#mydetails"
return $(content).find(container);
}
// show the whole page
return content;
}
// show standard popover content
return $(this).attr('data-content');
}
function get_popover_placement(pop, el) {
if ($(el).attr('data-placement')) {
return $(el).attr('data-placement');
}
// find out the best placement
// ... cut ...
return 'left';
}
Açılır penceredeki içerik büyük olasılıkla değişmeyecekse, içeriğin yalnızca bir kez alınması mantıklı olacaktır. Ayrıca, buradaki çözümlerden bazıları, birden çok "önizlemenin" üzerinden hızlı bir şekilde geçerseniz, birden çok açık açılır pencere alacağınız sorununa sahiptir. Bu çözüm her ikisine de hitap ediyor.
$('body').on('mouseover', '.preview', function()
{
var e = $(this);
if (e.data('title') == undefined)
{
// set the title, so we don't get here again.
e.data('title', e.text());
// set a loader image, so the user knows we're doing something
e.data('content', '<img src="/images/ajax-loader.gif" />');
e.popover({ html : true, trigger : 'hover'}).popover('show');
// retrieve the real content for this popover, from location set in data-href
$.get(e.data('href'), function(response)
{
// set the ajax-content as content for the popover
e.data('content', response.html);
// replace the popover
e.popover('destroy').popover({ html : true, trigger : 'hover'});
// check that we're still hovering over the preview, and if so show the popover
if (e.is(':hover'))
{
e.popover('show');
}
});
}
});
Varsayılan işlevsellikle çözümümün daha basit olduğunu düşünüyorum.
http://jsfiddle.net/salt/wbpb0zoy/1/
$("a.popover-ajax").each(function(){
$(this).popover({
trigger:"focus",
placement: function (context, source) {
var obj = $(source);
$.get(obj.data("url"),function(d) {
$(context).html( d.titles[0].title)
});
},
html:true,
content:"loading"
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="list-group">
<li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Cras justo odio</a></li>
<li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Dapibus ac facilisis in</a></li>
<li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Morbi leo risus</a></li>
<li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Porta ac consectetur ac</a></li>
<li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Vestibulum at eros</a></li>
</ul>Burada çok fazla cevap var ama hiçbirini istediğim gibi bulamadım. Ivan Klass'ın cevabını hem Bootstrap 4'e uygun hem de akıllıca önbelleğe alınacak şekilde genişlettim.
Snippet'in, Stackoverflow'un CORS politikası nedeniyle uzak adresi gerçekte yüklemeyeceğini unutmayın.
var popoverRemoteContents = function(element) {
if ($(element).data('loaded') !== true) {
var div_id = 'tmp-id-' + $.now();
$.ajax({
url: $(element).data('popover-remote'),
success: function(response) {
$('#' + div_id).html(response);
$(element).attr("data-loaded", true);
$(element).attr("data-content", response);
return $(element).popover('update');
}
});
return '<div id="' + div_id + '">Loading...</div>';
} else {
return $(element).data('content');
}
};
$('[data-popover-remote]').popover({
html: true,
trigger: 'hover',
content: function() {
return popoverRemoteContents(this);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<span data-popover-remote="http://example.com/">Remote Popover test with caching</span>Bu konu başlığında buna benzer bir yanıt verilmiştir: Veri içeriğini ayarlama ve açılır pencereyi görüntüleme - bu, başarmayı umduğunuz şeyi yapmanın daha iyi bir yoludur. Aksi takdirde, açılır pencere yönteminin seçeneklerinde live: true seçeneğini kullanmanız gerekecektir. Umarım bu yardımcı olur
Çözümü Çağatay Gürtürk'ten denedim ama Karanlık Luke'la aynı tuhaflığı yaşadım. Ardından çözümü Asa Kusuma denedi. Bu çalışır, ancak bunu Ajax okumak yapar inanıyoruz her popover gösterildiği zamanı. Bağlantının kaldırılması çağrısının ('vurgulu') hiçbir etkisi yoktur. Bunun nedeni, temsilcinin belirli bir sınıftaki olayları izlemesidir - ancak bu sınıf değişmez.
İşte benim çözümüm, Asa Kusuma'ya yakından dayanıyor. Değişiklikler:
delegateile onyeni JQuery kütüphaneleri eşleşecek. / * Hedef: İçeriğin şuradan getirildiği bir araç ipucu / açılır bilgi penceresi görüntüle
sadece ilk kez uygulama.
Nasıl: Uygun içeriği getirin ve araç ipucunu / açılır bilgi penceresini ilk kez kaydedin
fare "withajaxpopover" sınıfına sahip bir DOM öğesine girer. Kaldır
öğeden sınıflayın, böylece fare bir dahaki sefere girdiğinde bunu yapmayız.
Ancak, bu araç ipucunu / açılır pencereyi ilk kez göstermiyor
(çünkü araç ipucu kaydedildiğinde fare zaten girilmiştir).
Bu yüzden bunu kendimiz göstermemiz / saklamamız gerekir.
* /
$ (işlev () {
$ ['body']. on ('hover', '.withajaxpopover', function (event) {
eğer (event.type === 'mouseenter') {
var el = $ (bu);
$ .get (el.attr ('veri yükleme'), fonksiyon (d) {
el.removeClass ('withajaxpopover')
el.popover ({trigger: 'hover',
title: d.title,
içerik: d.content}). açılır bilgi penceresi ('göster');
});
} Başka {
$ (this) .popover ('gizle');
}
});
});
Burada bazı önerileri denedim ve benimkini sunmak istiyorum (bu biraz farklıdır) - umarım birine yardımcı olur. Açılır pencereyi ilk tıklamada göstermek ve ikinci tıklamada gizlemek istedim (tabii ki verileri her seferinde güncelleyerek). visableAçılır bilgi penceresinin görünür olup olmadığını bilmek için fazladan bir değişken kullandım . İşte kodum: HTML:
<button type="button" id="votingTableButton" class="btn btn-info btn-xs" data-container="body" data-toggle="popover" data-placement="left" >Last Votes</button>
Javascript:
$('#votingTableButton').data("visible",false);
$('#votingTableButton').click(function() {
if ($('#votingTableButton').data("visible")) {
$('#votingTableButton').popover("hide");
$('#votingTableButton').data("visible",false);
}
else {
$.get('votingTable.json', function(data) {
var content = generateTableContent(data);
$('#votingTableButton').popover('destroy');
$('#votingTableButton').popover({title: 'Last Votes',
content: content,
trigger: 'manual',
html:true});
$('#votingTableButton').popover("show");
$('#votingTableButton').data("visible",true);
});
}
});
Şerefe!
<button type="button" id="popover2" title="" data-content="<div id='my_popover' style='height:250px;width:300px;overflow:auto;'>Loading...Please Wait</div>" data-html="true" data-toggle="popover2" class="btn btn-primary" data-original-title="A Title">Tags</button>
$('#popover2').popover({
html : true,
title: null,
trigger: "click",
placement:"right"
});
$("#popover2").on('shown.bs.popover', function(){
$('#my_popover').html("dynamic content loaded");
});
İşte birkaç sorunu çözmenin bir yolu:
._popper.update()açılır bilgi penceresinin konumunu yeniden hesaplayan çağırıyor.max-width).var e = $("#whatever");
e.popover({
placement: "top",
trigger: "hover",
title: "Test Popover",
content: "<span class='content'>Loading...</span>",
html: true
}).on("inserted.bs.popover", function() {
var popover = e.data('bs.popover');
var tip = $(popover.tip);
tip.css("width", "100%");
$.ajax("/whatever")
.done(function(data) {
tip.find(".content").text(data);
popover._popper.update();
}).fail(function() {
tip.find(".content").text("Sorry, something went wrong");
});
});
popover._popper.update()ve emin olun popover, _popperve updatetüm beklenen değerleri vardır. Bunların değişmiş olması kesinlikle mümkündür.
$("a[rel=popover]").each(function(){
var thisPopover=$(this);
var thisPopoverContent ='';
if('you want a data inside an html div tag') {
thisPopoverContent = $(thisPopover.attr('data-content-id')).html();
}elseif('you want ajax content') {
$.get(thisPopover.attr('href'),function(e){
thisPopoverContent = e;
});
}
$(this).attr( 'data-original-title',$(this).attr('title') );
thisPopover.popover({
content: thisPopoverContent
})
.click(function(e) {
e.preventDefault()
});
});
Aynı href etiketini kullandığımı ve tıklandığında sayfaları değiştirmemesi için yaptığımı unutmayın, bu SEO için iyi bir şeydir ve ayrıca kullanıcının javascript'i yoksa!
Orijinal çözümü kullandım ancak birkaç değişiklik yaptım:
İlk olarak, getJSON()bunun yerine get()bir json betiği yüklediğim için kullandım. Ardından, yapışkan pop over sorununu düzeltmek için fareyle üzerine gelme tetikleyici davranışını ekledim.
$('*[data-poload]').on('mouseover',function() {
var e=$(this);
$.getJSON(e.data('poload'), function(data){
var tip;
$.each(data, function (index, value) {
tip = this.tip;
e.popover({content: tip, html: true, container: 'body', trigger: 'hover'}).popover('show');
});
});
});
Sonuçlarınızı biçimlendirmek istemeniz durumunda html: true ekledim, böylece ham html çıktısını göstermez. Ayrıca daha fazla kontrol ekleyebilirsiniz.
$('*[data-poload]').bind('click',function() {
var e=$(this);
e.unbind('click');
$.get(e.data('poload'),function(d) {
e.popover({content: d, html: true}).popover('show', {
});
});
});
Fareyle üzerine gelme tetikleyicili statik öğede ajax açılır penceresini görüntüleyin:
$('.hover-ajax').popover({
"html": true,
trigger: 'hover',
"content": function(){
var div_id = "tmp-id-" + $.now();
return details_in_popup($(this).attr('href'), div_id);
}
});
function details_in_popup(link, div_id){
$.ajax({
url: link,
success: function(response){
$('#'+div_id).html(response);
}
});
return '<div id="'+ div_id +'">Loading...</div>';
}
Html:
<span class="hover-ajax" href="http://domain.tld/file.php"> Hey , hoover me ! </span>
$('[data-poload]').popover({
content: function(){
var div_id = "tmp-id-" + $.now();
return details_in_popup($(this).data('poload'), div_id, $(this));
},
delay: 500,
trigger: 'hover',
html:true
});
function details_in_popup(link, div_id, el){
$.ajax({
url: link,
cache:true,
success: function(response){
$('#'+div_id).html(response);
el.data('bs.popover').options.content = response;
}
});
return '<div id="'+ div_id +'"><i class="fa fa-spinner fa-spin"></i></div>';
}
Ajax içeriği bir kez yüklenir! görmekel.data('bs.popover').options.content = response;
Yaptım ve ajax ile mükemmel çalışıyor ve popover içeriği yükleniyor.
var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
var container, timeout;
originalLeave.call(this, obj);
if(obj.currentTarget) {
container = $(obj.currentTarget).siblings('.popover')
timeout = self.timeout;
container.one('mouseenter', function(){
//We entered the actual popover – call off the dogs
clearTimeout(timeout);
//Let's monitor popover content instead
container.one('mouseleave', function(){
$.fn.popover.Constructor.prototype.leave.call(self, self);
});
})
}
};
var attr = 'tooltip-user-id';
if ($('a['+ attr +']').length)
$('a['+ attr +']').popover({
html: true,
trigger: 'click hover',
placement: 'auto',
content: function () {
var this_ = $(this);
var userId = $(this).attr(attr);
var idLoaded = 'tooltip-user-id-loaded-' + userId;
var $loaded = $('.' + idLoaded);
if (!$loaded.length) {
$('body').append('<div class="'+ idLoaded +'"></div>');
} else if ($loaded.html().length) {
return $loaded.html();
}
$.get('http://example.com', function(data) {
$loaded.html(data);
$('.popover .popover-content').html(data);
this_.popover('show');
});
return '<img src="' + base_url + 'assets/images/bg/loading.gif"/>';
},
delay: {show: 500, hide: 1000},
animation: true
});
Bunu kontrol edebilirsiniz http://kienthuchoidap.com . Buna gidin ve kullanıcının kullanıcı adının üzerine gelin.
Benim için, yükleme açılır penceresinden önce veri içeriğini değiştir çalışır:
$('.popup-ajax').data('content', function () {
var element = this;
$.ajax({
url: url,
success: function (data) {
$(element).attr('data-content', data)
$(element).popover({
html: true,
trigger: 'manual',
placement: 'left'
});
$(element).popover('show')
}})
})
Bu benim için çalışıyor, bu kod düzeltmesi olası hizalama sorunları:
<a class="ajax-popover" data-container="body" data-content="Loading..." data-html="data-html" data-placement="bottom" data-title="Title" data-toggle="popover" data-trigger="focus" data-url="your_url" role="button" tabindex="0" data-original-title="" title="">
<i class="fa fa-info-circle"></i>
</a>
$('.ajax-popover').click(function() {
var e = $(this);
if (e.data('loaded') !== true) {
$.ajax({
url: e.data('url'),
dataType: 'html',
success: function(data) {
e.data('loaded', true);
e.attr('data-content', data);
var popover = e.data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
var calculated_offset = popover.getCalculatedOffset(popover.options.placement, popover.getPosition(), popover.$tip[0].offsetWidth, popover.$tip[0].offsetHeight);
popover.applyPlacement(calculated_offset, popover.options.placement);
},
error: function(jqXHR, textStatus, errorThrown) {
return instance.content('Failed to load data');
}
});
}
});
Her ihtimale karşı, kullandığım uç nokta html döndürür (raylar kısmi)
Kodun bir kısmını buradan aldım https://stackoverflow.com/a/13565154/3984542