web-dev-qa-db-ja.com

Bootstrap=ポップオーバーコンテンツは動的に変更できません

次のようにコードを使用します。

$(".reply").popover({
  content: "Loading...",
  placement: "bottom"
});

$(".reply").popover("toggle");

これにより、ポップオーバーとそのコンテンツが正しく作成されます。ポップオーバーを閉じずに、ポップオーバーに新しいデータをロードしたい。

私は次を試しました：

var thisVal = $(this);
$.ajax({
  type: "POST",
  async: false,
  url: "Getdes",
  data: { id: ID }
}).success(function(data) {
  thisVal.attr("data-content", data);
});

この呼び出しの後、要素内のデータは変更されますが、表示されるポップオーバーでは変更されません。

どうすればいいですか？

jquerytwitter-bootstrappopover
59
Aravindhan

次のようにポップオーバーインスタンスを取得する場合：

_var popover = $('.reply').data('bs.popover');
_

次に、ポップオーバーを再描画するには、.setContent()メソッドを使用します。

_popover.setContent();
_

ソースを閲覧していることがわかりました： https://github.com/Twitter/bootstrap/blob/master/js/popover.js

したがって、あなたの例では、試してください：

_thisVal.attr('data-content',data).data('bs.popover').setContent();
_

更新

setContent()メソッドも配置クラスを削除するため、次のことを行う必要があります。

_var popover = thisVal.attr('data-content',data).data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
_

デモ： http://jsfiddle.net/44RvK

79
David Hellsing

はい、できます。実際、最も簡単な方法はまだ提案されていません。

これが私の方法です->

    var popover = $('#example').data('bs.popover');
    popover.options.content = "YOUR NEW TEXT";

popoverはオブジェクトについて詳しく知りたい場合は、定義してからconsole.log（popover）を実行して、後で使用する方法を確認してください！

[〜＃〜] edit [〜＃〜]

Bootstrap 4 alpha 5）の時点で、データ構造は少し異なります。popover.config.contentの代わりにpopover.options.contentを使用する必要があります

コメントしてくれた@kfriendに感謝

72
Yann Chabot

In bootstrap 3：

if($el.data('bs.popover')) {
    $el.data('bs.popover').options.content = "New text";
}
$el.popover('show');
22
neiker

2012年のこの回答は、Bootstrap 3のポップオーバーでは機能しません。 この質問 から有効なソリューションを抽出しました。

$（ "＃popover"）。attr（ 'data-content'、 'new content'）;

12
Mark L

これらのソリューションのほとんどは、実際私にはハッキーなようです。 Bootstrap標準ドキュメントには、使用できるメソッドdestroyがあります。そのため、何らかのイベントによるコンテンツの変更時に、コンテンツを単に破棄してから再作成できます。

.popover('destroy')

これにより、ポップオーバーのコンテンツが適切に動的にロード、更新、再レンダリングされます。

10
bjm88

シンプルなソリューション

これで試すことができます：

//Bootstrap v3.3.7 var popoverEl = $("#popover"); popoverEl.attr("data-content", "NEW CONTENT"); popoverEl.popover("show");

ありがとう。

4
wilfredonoyola

@ David および @ Sujay sreedhar の回答を使用して問題を解決しましたが、新しいコンテンツの読み込み中にポップオーバーが表示される場合は、ポップオーバーを再配置する必要があります。

var popover = thisVal.attr('data-content',data).data('popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
// if popover is visible before content has loaded
if ($(".reply").next('div.popover:visible').length){
    // reposition
    popover.show();
}

それが再配置されず、新しいコンテンツが異なる高さの場合、ポップオーバーは下方向に拡大し、矢印はターゲットから外れます！

また、その後ボタンをクリックすると、ポップオーバーを閉じるのではなく、再度開きます。上記のコードは、その問題も解決します。

デモ http://jsfiddle.net/whFv6/

（私の編集は拒否されたので、ここに投稿すると思いました。）

3
mlunoe

関数としてタイトルを渡すことができます

var content = 'Loading...'

function dynamicContent(){
  return content
}
$(".reply").popover({
  content: dynamicContent,
  placement: "bottom"
});

$(".reply").popover("toggle");

そして、変数の内容を動的に変更します。

1
itay oded
<button data-toggle="popover" data-html="true" data-content='<div id="myPopover">content</div>'>click</button>
$('#myPopover').html('newContent')

これは非常にきれいな方法です。

1
Ares

ポップオーバーが正しく初期化されたら、jqueryを直接使用してclass="popover-content"要素：

$(".popover-content").html('a Nice new content')
1
Lionel

HTML

<a data-toggle="popover" popover-trigger="outsideClick" title="Indicadores" data-content="" data-html="true" class="Evaluar" id="alun codigo"><span><i class="fa fa-check"></i>algun nombre</span></a>

JQUERY

$('a.Evaluar').on('click', function () {
    var a=$(this);//.attr('data-content', "mañana");
    $.ajax({
        url: "../IndicadorControlador?accion=BuscarPorProceso&cP=24",
        type: 'POST',
        dataType: 'json'
    })
            .done(function (response) {
                //alert("done. ");
                var ind = "";
                $(response).each(function (indice, elemento) {
                    //alert(elemento.strIdentificador);
                    //console.log('El elemento con el índice ' + indice + ' contiene ' + elemento.strIdentificador.toString());
                    ind += '<a href=#>'+elemento.strIdentificador.toString()+'</a>';
                });
              $(a).attr('data-content', ind);
            })
            .fail(function () {
                sweetAlert("ERROR!", " Algo salió mal en el controlador!", "error");
            })
            .complete(function () {
            });

    $('[data-toggle="popover"]').popover();
});
0
Cristianetoo Geova

bootstrap 3.1.1。の非同期ポップオーバーを作成しました。これをpopoverasyncと呼びました。以下にデモを示します。

非同期ポップオーバーデモ

デモのソースはこちらからダウンロードできます。

デモソース

私にとっての秘Theは、この非同期ポップオーバーのgetContentメソッドを記述して、コンテンツを取得するユーザーのjavascript関数が呼び出されるようにすることでしたが、getContentは同期して待機アニメーションを返しますgetContentの呼び出し元に。このように、ポップオーバーにはどちらの方法でもコンテンツがあります。まず、ユーザーが待機している間、そして最後にコンテンツが到着したとき。私が言及していることは、extensions.jsデモソース：

これがあなたを助けることを願っています！

ダン

0
Daniel Kemper

ポップオーバーを有効にすると、データが変更された場合でも、以前のバージョン（既に作成されている場合）が保持されます。新しいポップオーバーを再度作成するには、以前のバージョンを破棄する必要があります。 In Bootstrap 4.xはそれを行う

.popover('dispose')

ajax呼び出しを介してデータに変更があったときはいつでも実行してください。

0
Sreeram