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

Posted 2023-05-08

【中文标题】bootstrap popover：使用 ajax 重新加载内容

【英文标题】：bootstrap popover: reload content with ajax

【发布时间】：2012-05-30 21:03:11

【问题描述】：

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

第二个 ajax 请求（当我单击“a.close”时）返回更新的内容（我可以在控制台中看到它），但它没有加载到弹出框内。

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

我还能尝试什么？ 谢谢

【参考方案1】：

您可以直接访问弹出框工具提示内容，而不是重置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);

【讨论】：

这对我很有帮助，但如果您不想删除弹出框的默认模板，您应该执行以下操作：t.data('popover').tip().find(".popover-content").empty().append(r);

对于 bootstrap 3 版本，您需要交换：t.data('.popover') 与 t.data('bs.popover')

【参考方案2】：

当你可以替换时，为什么要empty() 然后append()？

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

编辑：

此外，当 popover 已经初始化并且您想要动态更改内容时，第一种方法是正确的并且工作正常（引导 2.1）。您只需再次调用'show' 即可刷新弹出框（内容和位置）：

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

【讨论】：

也适用于 bootstrap 3，尽管根据您的示例仅使用 .attr() 有效，.data() 无效

【参考方案3】：

经过几个小时的搜索，我想通了。对于 Bootstrap 3，您可以使用下面的代码。更多参考资料如下： https://github.com/twbs/bootstrap/issues/11528 和 Bootstrap popover content cannot changed dynamically if($element.data('bs.popover')) $element.data('bs.popover').options.content = 'NEW CONTENT';

【讨论】：

谢谢哥们。在所有解决方案中，这个工作正常。

【参考方案4】：

同样的问题，我用这个技巧解决了，代码很冗长，只是一个例子，优化一下！

// 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 "data-content" 或 popover 的第一次调用（实例化）时给出的选项上获取的。

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

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

而 bootstrap 获得了 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);
    

对我来说工作得很好。

【讨论】：

item.attr('data-content', content);作品！谢谢！使用 Bootstrap v2.0.4

【参考方案5】：

这项工作形成了我： 在文档准备好时初始化弹出框（数据是一个带有 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);
     );
    /* */

 );