jquery - ブートストラップ ポップオーバー: ajax でコンテンツをリロードする

Question

ajax を使用してブートストラップ ポップオーバーのコンテンツをリロードできません。ここにいくつかのコードがあります: http://pastie.org/3960102

2 番目の ajax リクエスト (「a.close」をクリックしたとき) は、更新されたコンテンツを返します (コンソールで確認できます) が、ポップオーバー内に読み込まれません。

私は解決策を探しましたが、どれもうまくいかないようです。

他に何を試すことができますか？ありがとうございました

Answer 1

属性をリセットする代わりにdata-content、ポップオーバー ツールチップのコンテンツに直接アクセスできます。

次の行を置き換えます。

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

この作業コードで：

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

2012年更新

ピゲイラスがコメントで指摘したように、それはポップオーバーのデフォルト テンプレートを破壊します。より良い解決策は、次の内容を置き換えることです.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);

Answer 2

なぜempty()、append()いつ交換できるのですか？

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

編集：

また、最初のアプローチは正しく、ポップオーバーが既に初期化されていて、その場で内容を変更したい場合 (ブートストラップ 2.1) に正常に動作します。'show'ポップオーバーを更新するには、もう一度呼び出す必要があります(コンテンツと位置):

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

Answer 3

何時間もの検索の後、私はそれを理解しました。Bootstrap 3 では、以下のコードを使用できます。その他の参照先: https://github.com/twbs/bootstrap/issues/11528およびBootstrap ポップオーバー コンテンツは動的に変更できません if($element.data('bs.popover')) { $element.data('bs.popover').options.content = 'NEW CONTENT'; }

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

タイトルを更新するコツも同じだと思います。

あなたがより良い解決策を持っているなら、plzは私に教えてください！

編集 ：

調査を続けました、

プラグインコードで見ることができます：

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"、またはポップオーバーの最初の呼び出し（インスタンス化）で指定されたオプションで取得されます。

しかし、実際には、問題は、オプションがキャッシュされ、呼び出しごとに更新されるわけではないため、waを使用する必要があることです。

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

私のためにうまく働きます。