使用AJAX加载Bootstrap popover内容.这可能吗？

Question

我尝试的相应部分在这里:

<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.我甚至没有看到用于将popover添加到DOM的HTML,但这可能是firebug.

有没人试过这个？

Answer 1

适合我:

$('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>';
}

Answer 2

请参阅我的博客文章了解工作解决方案:https://medium.com/cagataygurturk/load-a-bootstrap-popover-content-with-ajax-8a95cd34f6a4

首先,我们应该向要添加弹出窗口的元素添加data-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()绑定新的悬停事件.如果您希望在每个悬停事件中刷新数据,则应删除off.

请参阅示例的工作JSFiddle.

Answer 3

阅读完所有这些解决方案后,我认为如果使用同步 ajax调用,解决方案会变得更加简单.然后你可以使用类似的东西:

  $('#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');
  });

Answer 4

我已经更新了最流行的答案.但如果我的更改未获批准,我会在此处单独回答.

差异是:

• 加载内容时显示的加载文本.非常适合慢速连接.
• 删除鼠标第一次弹出时发生的闪烁.

首先,我们应该向要添加弹出窗口的元素添加data-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()绑定新的悬停事件.如果您希望在每个悬停事件中刷新数据,则应删除off.

请参阅示例的工作JSFiddle.

Answer 5

来自ÇağatayGürtürk的代码的变体,您可以使用委托函数,并强制将弹出窗口隐藏在悬停.

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

Answer 6

ÇağatayGürtürk的解决方案很不错,但我经历了Luke The Obscure描述的同样奇怪:

当AJAX持续加载过多(或鼠标事件是太快了),我们有一个.popover("秀")和一个给定的元素上没有.popover("隐藏")引起酥料饼保持开放.

我更喜欢这种大规模预加载解决方案,所有popover内容都被加载,事件由正常(静态)弹出窗口中的引导程序处理.

$('.popover-ajax').each(function(index){

    var el=$(this);

    $.get(el.attr('data-load'),function(d){
        el.popover({content: d});       
    });     

});

Answer 7

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

Answer 8

另一种方案:

$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和鼠标离开事件.

上了mouseenter,如果有(你的项目没有产生酥料饼的,如果($(本).数据("酥料饼")== NULL) ),创建它.有趣的是,您可以通过将其作为参数(模板)传递给popover()函数来定义自己的PopOver内容.不要忘记将html参数也设置为true.

在这里,我只创建一个名为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>

在创建步骤之后(或者如果已经创建),您只需使用$(this).popover('show')显示popOver;

然后经典的Ajax调用.成功之后,您需要在从服务器提供新的新数据之前清除旧的popover内容.我们如何获得当前的popover内容？使用.popover.in选择器!的.在类指示酥料饼的当前显示,这是这里的伎俩!

要完成,在mouseleave事件上,只需隐藏弹出框即可.