使用AJAX加载引导popup窗口内容。 这可能吗？
我尝试的适当的位在这里：
<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') }) 当我点击，我看到请求，但不填充popover。 我什至没有看到popup窗口的HTML添加到DOM，但可能是萤火虫。
有没有人试过这个？
看到我的博客文章的工作解决scheme： https : //medium.com/cagataygurturk/load-a-bootstrap-popover-content-with-ajax-8a95cd34f6a4
首先，我们应该为要添加stream行元素的元素添加一个数据poload属性。 此属性的内容应该是要加载的url（绝对或相对）：
<a href="#" title="blabla" data-poload="/test.php">blabla</a>
而在JavaScript中，最好在$（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')可以防止多次加载数据，popover()绑定一个新的hover事件。 如果您希望每次hover事件都刷新数据，则应该将其closures。请参阅示例的工作JSFiddle 。
为我工作好：
$('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>'; }
阅读所有这些解决scheme后，我认为如果使用同步 ajax调用，解决scheme变得更简单。 然后你可以使用像这样的东西：
$('#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'); });
来自ÇağatayGürtürk的代码的一个变种，你可以使用委托function，而强制隐藏在h poppopup。
$('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'); } });
另一个scheme
$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'); });
这里的想法是用mouseenter和mouseleave事件手动触发PopOver的显示。
在mouseenter上，如果没有为您的项目创buildPopOver（ if（$（this）.data（'popover'）== null） ），请创build它。 有趣的是，您可以通过将参数（ 模板 ）作为参数（popover）传递给popover （）函数来定义自己的PopOver内容。 不要忘记也将html参数设置为true 。
在这里，我只是创build一个名为popovertemplate的隐藏模板，并使用JQuery进行克隆。 一旦克隆，不要忘了删除id属性，否则最终会在DOM中出现重复的id。 还要注意style =“display：none”来隐藏页面中的模板。
<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>
在创build步骤之后（或者已经创build了），你只需要显示popOver $（this）.popover（'show'）;
然后传统的Ajax调用。 成功之前，您需要先清理旧的popup式内容，然后再从服务器上添加新的数据 。 我们如何获得当前的popover内容？ 使用.popover.inselect器！ .in类表示popup窗口当前正在显示，这就是诀窍！
要完成，在mouseleave事件，只隐藏popover。
ÇağatayGürtürk的解决scheme是好的，但我经历了卢克朦胧：
当Ajax加载过多（或鼠标事件太快）时，我们在给定的元素上有一个.popover（'show'）和no .popover（'hide'），导致popover保持打开状态。
我更喜欢这个大规模的预加载解决scheme，所有的popover内容都被加载，事件通过正常（静态）popup式的bootstrap来处理。
$('.popover-ajax').each(function(index){ var el=$(this); $.get(el.attr('data-load'),function(d){ el.popover({content: d}); }); });
在2015年，这是最好的答案
$('.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') });
如果popup窗口中的内容不可能改变，那么只检索一次是有意义的。 此外，这里的一些解决scheme有一个问题，如果你快速移动多个“预览”，你会得到多个打开的popup窗口。 这个解决scheme解决了这两件事。
$('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="http://img.dovov.comajax-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'); } }); } });
我认为我的解决scheme更简单的默认function。
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="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>
我已经更新了最受欢迎的答案。 但如果我的更改不会被批准，我在这里单独回答。
差异是：
- 正在加载内容时显示正在载入的文字。 非常适合慢速连接。
- 删除鼠标第一次popup时发生的闪烁。
首先，我们应该为要添加stream行元素的元素添加一个数据poload属性。 此属性的内容应该是要加载的url（绝对或相对）：
<a href="#" data-poload="/test.php">HOVER ME</a>
而在JavaScript中，最好在$（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')可以防止多次加载数据， popover()绑定一个新的hover事件。 如果您希望每次hover事件都刷新数据，则应该将其closures。
请参阅示例的工作JSFiddle 。
这里是我的解决scheme，它也适用于Ajax加载的内容。
/* * 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ğatayGürtürk的解决scheme，但却得到了与Luke the Obscure一样的奇怪。 然后尝试了Asa Kusuma的解决scheme。 这是有效的，但是我相信每次显示popup窗口时都会读取Ajax。 解除绑定（'hover'）不起作用。 这是因为代表正在监视特定类中的事件 – 但该类没有改变。
这是我的解决scheme，密切基于阿萨库苏马的。 变化：
- 使用
onreplacedelegate来匹配新的JQuery库。 - 删除'withajaxpopover'类，而不是解除绑定hover事件（从未绑定）
- 将“trigger：hover”添加到popup窗口，以便Bootstrap将从第二次使用开始完全处理它。
- 我的数据加载函数返回JSon，这可以很容易地指定标题和popover的内容。
/ *目标：显示从中提取内容的工具提示/popup窗口
只有第一次申请。
如何：获取适当的内容并首次注册工具提示/popup窗口
鼠标进入类“withajaxpopover”的DOM元素。 去除
从元素类，所以我们不会做下一次鼠标进入。
但是，这并不是第一次显示工具提示/popup窗口
（因为注册工具提示时鼠标已经进入）。
所以我们必须自己显示/隐藏它。
* /
$（function（）{
$（'body'）。on（'hover'，'.withajaxpopover'，function（event）{
if（event.type ==='mouseenter'）{
var el = $（this）;
$获得（el.attr（ '数据负载'），函数（d）{
el.removeClass（ 'withajaxpopover'）
el.popover（{trigger：'hover'，
标题：d.title，
内容：d.content}）。popover（'show'）;
}）;
} else {
$（本）.popover（ '隐藏'）;
}
}）;
}）;
我在这里尝试了一些build议，我想提出我的（这是有点不同） – 我希望它会帮助某人。 我想在第一次点击时显示popup窗口，并在第二次点击时隐藏它 （当然每次更新数据）。 我使用了一个额外的variablesvisable知道popover是否可见或不。 这是我的代码：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); }); } });
干杯!
<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"); });
在这个线程中给出了一个类似于这样的答案： 设置数据内容和显示popup窗口 – 这是一个更好的方法来实现你希望达到的目的。 否则，您将不得不在popover方法的选项中使用live：true选项。 希望这有助于
$("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() }); });
请注意，我使用了相同的href标签，并使其不会更改页面，当点击时，这对SEO来说是一件好事，而且如果用户没有javascript！
我喜欢Çağatay的解决scheme，但我的popup窗口不隐藏在mouseout。 我添加了这个额外的function：
// hides the popup $('*[data-poload]').bind('mouseout',function(){ var e=$(this); e.popover('hide'); });
我使用了原来的解决scheme，但做了一些改变：
首先，我使用getJSON()而不是get()因为我正在加载一个json脚本。 接下来，我添加了hover的触发器行为来解决粘滞stream行的问题。
$('*[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'); }); }); });
我添加了HTML：true，所以它不显示原始的html输出，以防你想格式化你的结果。 您还可以添加更多的控件。
$('*[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', { }); }); });
使用hover触发器在静态元素上显示ajax popover：
$('.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内容被加载一次！ 请参阅el.data('bs.popover').options.content = response;
我做了，它的工作完美的Ajax和加载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 + 'assetshttp://img.dovov.combg/loading.gif"/>'; }, delay: {show: 500, hide: 1000}, animation: true });
你可以查看http://kienthuchoidap.com 。 转到此并hover到用户的用户名。
对于我来说，更改数据内容befora加载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') }}) })
