Bagian yang sesuai dari apa yang saya coba ada di sini:
<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')
})
Saat saya mengklik, saya melihat permintaan dibuat, tetapi tidak mengisi popover. Saya bahkan tidak melihat HTML untuk popover ditambahkan ke DOM, tapi itu bisa jadi firebug.
Apakah ada yang mencoba ini?
'shown.bs.popover'handler: stackoverflow.com/a/39028723/1371408
Jawaban:
Lihat posting blog saya untuk solusi yang berfungsi: https://medium.com/cagataygurturk/load-a-bootstrap-popover-content-with-ajax-8a95cd34f6a4
Pertama kita harus menambahkan atribut data-poload ke elemen yang ingin Anda tambahkan pop-up. Isi atribut ini harus berupa url yang akan dimuat (absolut atau relatif):
<a href="#" title="blabla" data-poload="/test.php">blabla</a>
Dan di JavaScript, lebih disukai dalam $ (document) .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')mencegah memuat data lebih dari sekali danpopover()mengikat peristiwa hover baru. Jika Anda ingin data disegarkan pada setiap acara hover, Anda harus menghapusnya.Silakan lihat JSFiddle yang berfungsi dari contoh.
htmlproperti popover ke true, lalu mengatur contentproperti ke tag HTML iframe, seperti content: '<iframe src="http://www.google.com"></iframe>'. Anda juga harus mengganti max-widthproperti popover Anda menggunakan CSS, dan kemungkinan besar menghapus gaya iframe menggunakan CSS juga.
e.off('hover')metode
Bekerja dengan baik untuk saya:
$('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>';
}
Setelah membaca semua solusi ini, saya pikir solusinya menjadi lebih sederhana jika Anda menggunakan panggilan ajax sinkron . Anda kemudian dapat menggunakan sesuatu seperti:
$('#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: falsemembunuh ini untuk saya
Saya telah memperbarui jawaban paling populer. Tetapi jika perubahan saya tidak disetujui, saya taruh di sini jawaban terpisah.
Perbedaannya adalah:
Pertama kita harus menambahkan atribut data-poload ke elemen yang ingin Anda tambahkan pop-up. Isi atribut ini harus berupa url yang akan dimuat (absolut atau relatif):
<a href="#" data-poload="/test.php">HOVER ME</a>
Dan di JavaScript, lebih disukai dalam $ (document) .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')mencegah memuat data lebih dari sekali dan popover()mengikat peristiwa hover baru. Jika Anda ingin data disegarkan pada setiap acara hover, Anda harus menghapusnya.
Silakan lihat JSFiddle yang berfungsi dari contoh.
Variasi kode dari Çağatay Gürtürk, Anda dapat menggunakan fungsi delegasi dan memaksa menyembunyikan popover saat hoverout.
$('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');
}
});
Solusi Çağatay Gürtürk bagus tetapi saya mengalami keanehan yang sama yang dijelaskan oleh Luke The Obscure:
Ketika pemuatan ajax berlangsung terlalu lama (atau peristiwa mouse terlalu cepat) kami memiliki .popover ('show') dan tidak ada .popover ('hide') pada elemen tertentu yang menyebabkan popover tetap terbuka.
Saya lebih suka solusi pra-muat masif ini, semua konten popover dimuat dan acara ditangani oleh bootstrap seperti pada popovers normal (statis).
$('.popover-ajax').each(function(index){
var el=$(this);
$.get(el.attr('data-load'),function(d){
el.popover({content: d});
});
});
DI 2015, ini jawaban terbaik
$('.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')
});
Solusi lain:
$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');
});
Idenya di sini adalah untuk memicu tampilan PopOver secara manual dengan mouseenter & mouseleave peristiwa .
Pada mouseenter , jika tidak ada PopOver yang dibuat untuk item Anda ( if ($ (this) .data ('popover') == null) ), buatlah. Yang menarik adalah Anda bisa mendefinisikan konten PopOver Anda sendiri dengan meneruskannya sebagai argumen ( template ) ke fungsi popover () . Jangan lupa untuk mengatur parameter html menjadi true juga.
Di sini saya baru saja membuat template tersembunyi yang disebut popovertemplate dan mengkloningnya dengan JQuery. Jangan lupa untuk menghapus atribut id setelah Anda menggandakannya , jika tidak, Anda akan mendapatkan id duplikat di DOM. Perhatikan juga bahwa style = "display: none" untuk menyembunyikan template di halaman.
<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>
Setelah langkah pembuatan (atau jika sudah dibuat), Anda tinggal menampilkan popOver dengan $ (this) .popover ('show');
Kemudian panggilan Ajax klasik. Jika berhasil, Anda perlu membersihkan konten popover lama sebelum memasukkan data baru dari server . Bagaimana kami bisa mendapatkan konten popover saat ini? Dengan pemilih .popover.in ! The .in menunjukkan bahwa popover sedang ditampilkan, itulah triknya di sini!
Untuk menyelesaikan, pada acara mouseleave , cukup sembunyikan popover.
Inilah solusi saya yang berfungsi baik dengan konten yang dimuat ajax juga.
/*
* 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';
}
Jika konten dalam popover tidak mungkin berubah, masuk akal untuk mengambilnya hanya sekali. Selain itu, beberapa solusi di sini memiliki masalah jika Anda memindahkan beberapa "pratinjau" dengan cepat, Anda mendapatkan beberapa munculan terbuka. Solusi ini membahas kedua hal tersebut.
$('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');
}
});
}
});
Saya pikir solusi saya lebih sederhana dengan fungsionalitas default.
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>Saya mencoba solusi dari Çağatay Gürtürk tetapi mendapatkan keanehan yang sama dengan Luke the Obscure. Kemudian dicoba solusi oleh Asa Kusuma. Ini berhasil, tapi saya yakin Ajax bisa membaca semuanya kali popover ditampilkan. Panggilan untuk melepas ikatan ('hover') tidak berpengaruh. Itu karena delegasi memantau kejadian di kelas tertentu - tetapi kelas itu tidak berubah.
Inilah solusi saya, berdasarkan Asa Kusuma. Perubahan:
delegatedengan onuntuk mencocokkan perpustakaan JQuery baru. / * Sasaran: Menampilkan keterangan alat / popover tempat konten diambil dari
aplikasi pertama kali saja.
Caranya: Ambil konten yang sesuai dan daftarkan tooltip / popover untuk pertama kalinya
mouse memasuki elemen DOM dengan kelas "withajaxpopover". Hapus
kelas dari elemen jadi kami tidak melakukannya saat mouse masuk berikutnya.
Namun, itu tidak menampilkan tooltip / popover untuk pertama kalinya
(karena mouse sudah masuk saat tooltip didaftarkan).
Jadi kita harus menunjukkan / menyembunyikannya sendiri.
* /
$ (function () {
$ ('body'). on ('hover', '.withajaxpopover', function (event) {
if (event.type === 'mouseenter') {
var el = $ (ini);
$ .get (el.attr ('data-load'), function (d) {
el.removeClass ('withajaxpopover')
el.popover ({trigger: 'hover',
judul: d.title,
konten: d.content}). popover ('show');
});
} lain {
$ (ini) .popover ('sembunyikan');
}
});
});
Saya mencoba beberapa saran di sini dan saya ingin menyajikan milik saya (yang sedikit berbeda) - saya harap ini akan membantu seseorang. Saya ingin menampilkan popup pada klik pertama dan menyembunyikannya pada klik kedua (tentu saja dengan memperbarui data setiap kali). Saya menggunakan variabel tambahan visableuntuk mengetahui apakah popover terlihat atau tidak. Ini kode saya: 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);
});
}
});
Bersulang!
<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");
});
Berikut adalah cara untuk mengatasi beberapa masalah:
._popper.update(), yang menghitung ulang posisi popover.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()dan memastikannya popover, _popperdan updatesemua memiliki nilai yang diharapkan. Mungkin saja mereka telah berubah.
Ada terlalu banyak jawaban di sini tetapi saya juga tidak menemukan satu pun dari mereka yang saya inginkan. Saya telah memperpanjang jawaban Ivan Klass menjadi Bootstrap 4 yang sesuai dan di-cache dengan cerdas.
Perhatikan bahwa cuplikan tidak benar-benar memuat alamat jarak jauh karena kebijakan CORS Stackoverflow.
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>jawaban yang mirip dengan ini telah diberikan di utas ini: Mengatur konten data dan menampilkan popover - ini adalah cara yang lebih baik untuk melakukan apa yang ingin Anda capai. Jika tidak, Anda harus menggunakan opsi live: true dalam opsi metode popover. Semoga ini membantu
$("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()
});
});
perhatikan bahwa saya menggunakan tag href yang sama dan membuatnya agar tidak mengubah halaman saat diklik, ini adalah hal yang baik untuk SEO dan juga jika pengguna tidak memiliki javascript!
Saya menggunakan solusi asli tetapi membuat beberapa perubahan:
Pertama, saya menggunakan getJSON()alih-alih get()karena saya memuat skrip json. Selanjutnya saya menambahkan perilaku pemicu hover untuk memperbaiki masalah pop-over yang lengket.
$('*[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');
});
});
});
Saya menambahkan html: true, sehingga tidak menampilkan keluaran html mentah, jika Anda ingin memformat hasil Anda. Anda juga dapat menambahkan lebih banyak kontrol.
$('*[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', {
});
});
});
Tampilkan ajax popover pada elemen statis dengan pemicu hover:
$('.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>';
}
Konten Ajax dimuat sekali! Lihatel.data('bs.popover').options.content = response;
Saya melakukannya dan itu berfungsi sempurna dengan ajax dan memuat konten popover.
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
});
Anda dapat memeriksanya di http://kienthuchoidap.com . Goto ini dan arahkan ke nama pengguna pengguna.
Bagi saya bekerja mengubah data-konten befora memuat popover:
$('.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')
}})
})
Ini berfungsi untuk saya, kode ini memperbaiki kemungkinan masalah penyelarasan:
<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');
}
});
}
});
Untuk berjaga-jaga, titik akhir yang saya gunakan mengembalikan html (sebagian rel)
Saya mengambil beberapa bagian kode dari sini https://stackoverflow.com/a/13565154/3984542