Muat konten popover Bootstrap dengan AJAX. Apakah ini mungkin?

90

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?

jquery twitter-bootstrap CambridgeMike
sumber
1
Saya belum bekerja dengan bootstrap, tetapi saya membayangkan bahwa mungkin saja elemen tersebut tidak ada saat Anda mencoba menambahkan konten ke dalamnya, tetapi itu hanya tebakan. Apakah Anda mendapatkan kesalahan javascript?
Seth
Jika Anda memiliki beberapa popovers dan ingin memuat konten yang berbeda untuk setiap popover, maka jawaban ini sangat rapi dan memungkinkan Anda untuk menyimpan banyak pengaturan di luar kotak untuk popovers - yang perlu Anda lakukan hanyalah menyimpan ID popover pada atribut tautan, dan membacanya di 'shown.bs.popover'handler: stackoverflow.com/a/39028723/1371408
Matty J

Jawaban:

105

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 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.

Çağatay Gürtürk
sumber
4
Saya mendapat keanehan ketika saya mengarahkan mouse dua kali sebelum panggilan ajax selesai ... Popver saya akan "tetap" terbuka. Saya menyelesaikannya dengan memindahkan "el.unbind ('hover')" ke kanan sebelum $ .get ().
Luke The Obscure
1
Ini berfungsi, tetapi popover juga melekat pada saya, meskipun pelepasannya sebelum get
Androme
2
Jika Anda mencoba memuat URL eksternal, Anda akan mengalami pembatasan akses lintas domain. Untuk menyiasatinya, Anda dapat mengatur 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.
Gavin
1
@FrzKhan Anda dapat menggunakan e.off('hover')metode
codenamev
3
ini tidak bekerja karena stackoverflow.com/questions/4111194/… mengubah ke .hover (function () {}) berfungsi.
arisalexis
132

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>';
}
Ivan Klass
sumber
1
Jawaban jenius! dan itulah mengapa mengeditnya agar lebih mudah dibaca
itsazzad
2
Solusi bagus. Namun dengan versi bootstrap saat ini tampaknya mungkin ada beberapa masalah dengan metode ini github.com/twbs/bootstrap/issues/12563. Saya memiliki masalah dua kali dan solusi cepatnya adalah memastikan judul di setiap popover. Ini juga berarti bahwa saya sebenarnya tidak pernah melihat teks Memuat yang Anda gunakan.
Rasmus Christensen
Bekerja, kecuali saya harus menggunakan data-link daripada href, saat menggunakan href browser saya hanya akan membuka url di href di jendela baru.
TinusSky
20
Apakah ini tidak menyebabkan masalah kesejajaran? Saat menggunakan pendekatan ini di 3.3.1 (dan menggunakan Chrome), popover sejajar dengan sendirinya saat "Memuat ..." ditampilkan, tetapi segera setelah konten sebenarnya dari popover saya dimuat, penyelarasan tidak menyesuaikan. .
Matt
5
Solusi bagus. Satu kelemahan dari solusi ini adalah panggilan ajax dilakukan dua kali. Komponen popover adalah tooltip yang pertama memeriksa konten menggunakan hasContent dan kemudian mendapatkan konten dengan setContent.
Liam
23

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');
  });
Kebingungan
sumber
1
Ini membantu saya keluar banyak, karena saya mengalami masalah dengan rendering popover dalam posisi tertentu sebelum ajax mengembalikan konten (menyebabkannya memuat dari layar). Terima kasih tuan!
Derek
Ini mungkin lebih sederhana, tetapi juga kurang elegan dibandingkan solusi yang diposting oleh @Ivan Klass.
Ian Kemp
6
async: falsemembunuh ini untuk saya
mxmissile
Meskipun lebih mudah, JavaScript dan kode sinkron tidak benar-benar berfungsi bersama. Karena JavaScript adalah single-threaded, ini akan memblokir kode apa pun agar tidak dieksekusi selama permintaan berlangsung.
IluTov
1
AJAX sinkron sudah tidak digunakan lagi.
Barmar
9

Saya telah memperbarui jawaban paling populer. Tetapi jika perubahan saya tidak disetujui, saya taruh di sini jawaban terpisah.

Perbedaannya adalah:

  • Teks LOADING ditampilkan saat konten sedang dimuat. Sangat bagus untuk koneksi lambat.
  • Kedipan dihapus yang terjadi saat mouse meninggalkan popover untuk pertama kalinya.

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.

Alexander Chzhen
sumber
7

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');
    }
});
Asa Kusuma
sumber
Untuk jquery terkini: $ ('* [data-poload]'). On ('mouseenter mouseleave', function (event) {
jpprade
7

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

});
fustaki
sumber
7

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')
});
Dorian Margineanu
sumber
6

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.

doanduyhai
sumber
Hal yang sama bagi saya, yang paling sederhana & terbaik ;-)
Thomas Decaux
Masalahnya adalah pada setiap hover Anda meminta data dari server. Ini harus memuat data hanya sekali.
Richard Torcato
2
@Rich Torato Di satu sisi Anda benar. Namun, seharusnya cukup mudah untuk memasukkan hasilnya ke cache. Di sisi lain, mungkin kita ingin menekan server untuk memuat data baru pada setiap hover. Jadi, terserah Anda untuk menerapkan caching
doanduyhai
Saya menyadari ini sudah tua sekarang, tetapi jika seseorang melihat ini, saya tidak dapat membayangkan ini berfungsi dengan baik seperti jika Anda memiliki banyak popovers dan Anda menggulirnya masing-masing. Arahkan kursor ke A, permintaan dikirim untuk A, Arahkan kursor ke B dan tetap di atasnya, permintaan dikirim untuk B, tanggapan dari B tiba, perbarui popover untuk B, tanggapan untuk A tiba, perbarui popover untuk B (karena fungsi sukses akan cukup jelaskan apa pun dengan kelas itu. Melihat ini untuk melengkapi di atas mungkin membantu meskipun stackoverflow.com/a/34030999/2524589
KSib
3

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';
}
tukang bor
sumber
3

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');
            }
        });
    }
});
towr
sumber
3

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>
Luaskan cuplikan

Salt Hareket
sumber
1

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:

  • Diganti delegatedengan onuntuk mencocokkan perpustakaan JQuery baru.
  • Hapus kelas 'withajaxpopover' daripada melepas acara hover (yang tidak pernah terikat)
  • Tambahkan "trigger: hover" ke popover sehingga Bootstrap akan menanganinya sepenuhnya dimulai dengan penggunaan kedua.
  • Fungsi pemuatan data saya mengembalikan JSon, yang memudahkan untuk menentukan judul dan konten popover.
    / * 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');
          }
      });
    });
bwbecker.dll
sumber
1

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!

ItayB
sumber
1 
<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");

});
Shankar Gupta
sumber
1

Berikut adalah cara untuk mengatasi beberapa masalah:

  1. Masalah perataan setelah konten diperbarui, terutama jika penempatannya "teratas". Kuncinya adalah memanggil ._popper.update(), yang menghitung ulang posisi popover.
  2. Perubahan lebar setelah konten diperbarui. Itu tidak merusak apa pun, itu hanya terlihat menggelegar bagi pengguna. Untuk mengurangi itu, saya mengatur lebar popover menjadi 100% (yang kemudian dibatasi oleh 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");
        });
});
Gabriel Luci
sumber
Saya suka konsepnya, tapi sayangnya konsep tersebut tidak berfungsi untuk saya ... (yaitu pembaruan posisi dan lebar 100%) Tidak yakin apakah ini telah berubah dengan Bootstrap 4?
Ben di CA
Lebar 100% mungkin tergantung pada bagaimana elemen Anda ditata ... mungkin. Apakah kotak masih melebar setelah konten dimuat?
Gabriel Luci
Untuk posisi, Anda dapat mengatur breakpoint pada popover._popper.update()dan memastikannya popover, _popperdan updatesemua memiliki nilai yang diharapkan. Mungkin saja mereka telah berubah.
Gabriel Luci
Kanan - kotak melebar setelah konten baru. Dan saya mencoba menulis beberapa nilai ke konsol dan semakin tidak terdefinisi.
Ben di CA
1
- Kamu benar. Ternyata saya mencoba melakukan beberapa hal yang lebih rumit pada waktu yang sama dan kemudian tidak berhasil. Tapi sekarang saya sudah bisa memasukkannya juga. Berikut biola: jsfiddle.net/udfz5wrv/1 Memungkinkan Anda menggunakan selektor (jika Anda perlu mengikat penangan, dll.), Mengakses data dari selektor, menampilkan pemintal pemuatan bootstrap, dll.
Ben di CA
1

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>
Luaskan cuplikan

Archonic
sumber
Saya dapat menyesuaikan yang satu ini dengan mudah ke solusi yang saya butuhkan. Terima kasih!
Nieminen
0

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

E Steven
sumber
0 
$("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!

Neo
sumber
0

Saya suka solusi Çağatay, tapi saya popupnya tidak bersembunyi saat mouseout. Saya menambahkan fungsionalitas tambahan ini dengan ini:

// hides the popup
$('*[data-poload]').bind('mouseout',function(){
   var e=$(this);
   e.popover('hide'); 
});
Mino
sumber
0

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');
        });
    });
});
Tandai Flavin
sumber
0

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', {

            });
        });
    });
Warren Landis
sumber
0

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>
Alin Razvan
sumber
0 
  $('[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;

SirCumz
sumber
0

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.

Ho Thanh Binh
sumber
0

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')
        }})
})
Thiago Bussiki
sumber
0

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

vicente.fava
sumber