bootstrap popover:使用ajax重新加载内容

问题描述 投票:0回答:6

我在使用 ajax 重新加载引导程序弹出窗口的内容时遇到问题。 这是一些代码:http://pastie.org/3960102

第二个ajax请求(当我点击“a.close”时)返回更新的内容(我可以在控制台中看到它),但它没有加载到弹出窗口中。

我四处寻找解决方案,但似乎都不起作用。

我还能尝试什么? 谢谢你

jquery ajax twitter-bootstrap popover
6个回答
8
投票

您可以直接访问弹出框工具提示内容,而不用重置

data-content
属性。

替换以下行:

t.attr('data-content', r);

使用此工作代码:

t.data('popover').tip().html(r);

2012年更新

正如 Pigueiras 在他的评论中指出的那样,这会破坏弹出窗口的默认模板。更好的解决方案是替换

.popover-content
的内容:

t.data('popover').tip().find('.popover-content').empty().append(r);

2016年更新

感谢另一条评论,这是 Bootstrap 3 的工作代码:

t.data('bs.popover').tip().find('.popover-content').empty().append(r);

5
投票

为什么要

empty()
然后
append()
当你可以更换时?

t.data('popover').tip().find('.popover-content').html(r);

编辑:

此外,当弹出窗口已经初始化并且您想要动态更改内容时,第一种方法是正确的并且工作正常(引导程序 2.1)。您只需再次调用

'show'
即可刷新弹出窗口(内容和位置):

t.attr('data-content', r);
t.popover('show');

3
投票

经过几个小时的搜索,我找到了答案。对于 Bootstrap 3,您可以使用下面的代码。更多参考资料有: https://github.com/twbs/bootstrap/issues/11528Bootstrap 弹出内容无法动态更改

if($element.data('bs.popover')) {
      $element.data('bs.popover').options.content = 'NEW CONTENT';
    }


1
投票

同样的问题,我用这个技巧解决了,代码比较冗长,只是一个例子,优化一下!

// functions container
var doc = 
{
    doPopover : function( item_id, title, content )
    {
        // get jq item
        var item = $('#' + item_id );

        // the trick to "refresh content" in every call
        item.attr('data-content', content);

        // popover
        item.popover(
        {
            title   :   title,
            trigger :   'manual'
        }).popover('show');
    },

    popoverFirstCall : function()
    {
        this.doPopover('myDiv', 'Title', 'MyContent1');
    },

    popoverSecondCall : function()
    {
        var content = 'xxx'; // get the content in Ajax

        this.doPopover('myDiv', 'Title', content);
    }
}

// call funcs in your views
$(document).ready(function()
{
    // first popover with first content
    doc.popoverFirstCall();

    // this event wich call the ajax content and refresh popover. 
    $('#button').on('click', $.proxy(doc, 'popoverSecondCall'));
});

我想刷新标题的技巧也是一样的。

如果您有更好的解决方案,请告诉我!

编辑:

我继续调查,

我们可以在插件代码上看到:

getContent: function () {
      var content
        , $e = this.$element
        , o = this.options

      content = $e.attr('data-content')
        || (typeof o.content == 'function' ? o.content.call($e[0]) :  o.content)

      return content
    }

因此,内容是在 attr“数据内容”上获取的,或者是在第一次调用(实例化)弹出窗口时给出的选项上获取的。

但是,实际上,问题是,选项被缓存并且不会在每次调用时刷新,所以必须使用:

$('item_id').attr('data-content', 'some content'); // and warning, it is different than
$('item_id').data('content', 'some content');

引导程序获取 attr 方式。

标题相同:

getTitle: function () {

      var title
        , $e = this.$element
        , o = this.options

      title = $e.attr('data-original-title')
        || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)

      return title
    }

所以,doPopover 函数可以是:

    doPopover : function( item_id, title, content )
    {
        // get jq item
        var item = $('#' + item_id );

        // the trick to "refresh content" in every call
        item.attr('data-content', content); // do not use data() way.
        item.attr('data-original-title', title);

        // popover (trace first call if you want)
        item.popover(
        {
            trigger :   'manual'
        });

        item.popover('show);
    }

对我来说工作得很好。


0
投票

我的这项工作: 在文档准备好时初始化弹出窗口(数据是带有 HTML 和找到的元素大小的 json)

     $.ajax({
url: "/alpha/annuncio/scegliGestione",
success: function (data) {
    $('#notifiche').popover(
        {
            title:"Le tue notifiche",
            placement:'bottom',
            trigger:'manual'
        });
    $('#notifiche').find(".badge").text(data.size);

}

});

在弹出窗口的触发事件上,您必须依次切换弹出窗口(显示或隐藏),将弹出窗口内容设为空,最后附加 data.html

$("#notifiche").click(function(){

     $.get("/alpha/annuncio/scegliGestione", function(data) {
         $('#notifiche').popover('toggle')
         $("body").find('.popover-content').empty()
         $("body").find('.popover-content').append(data.html);

         $('#notifiche').find(".badge").text(data.size);
     });
    /* */

 });

0
投票

Bootstrap 5 从 2024 年开始更新。

要在创建 popover 实例后更新 popover 内容,可以使用

setContent
方法:

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
popover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

相关文档:https://getbootstrap.com/docs/5.3/components/popovers/#methods

© www.soinside.com 2019 - 2024. All rights reserved.