使用 AJAX 加载 Bootstrap popover 内容.这可能吗? [英] Load a Bootstrap popover content with AJAX. Is this possible?

问题描述

我尝试过的适当部分在这里:

当我点击时，我看到请求被发出，但没有填充弹出框.我什至没有看到弹出窗口的 HTML 被添加到 DOM 中，但这可能是萤火虫.

有人试过吗?

解决方案

请参阅我的博客文章以了解可行的解决方案: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('悬停');$.get(e.data('poload'),function(d) {e.popover({content: d}).popover('show');});});

<块引用>

off('hover') 防止多次加载数据和 popover() 绑定一个新的悬停事件.如果您希望在每次悬停时刷新数据事件，您应该删除关闭.

请参阅示例的工作 JSFiddle.

The appropriate bits of what I tried are here:

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

When I click, I see the request get made, but doesn't populate the popover. I don't even see HTML for the popover get added to the DOM, but that could be firebug.

Has anyone tried this?

解决方案

See my blog post for the working solution: https://medium.com/cagataygurturk/load-a-bootstrap-popover-content-with-ajax-8a95cd34f6a4

First we should add a data-poload attribute to the elements you would like to add a pop over to. The content of this attribute should be the url to be loaded (absolute or relative):

<a href="#" title="blabla" data-poload="/test.php">blabla</a>

And in JavaScript, preferably in a $(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') prevents loading data more than once and popover() binds a new hover event. If you want the data to be refreshed at every hover event, you should remove the off.

Please see the working JSFiddle of the example.

这篇关于使用 AJAX 加载 Bootstrap popover 内容.这可能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！