次のようにコードを使用します。
$(".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);
});
この呼び出しの後、要素内のデータは変更されますが、表示されるポップオーバーでは変更されません。
どうすればいいですか？
次のようにポップオーバー インスタンスを取得すると:
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);
はい、できます。実際、最も簡単な方法はまだ提案されていません。
これが私のやり方です - >
var popover = $('#example').data('bs.popover');
popover.options.content = "YOUR NEW TEXT";
popover はオブジェクトです。詳細を知りたい場合は、定義後に console.log(popover) を実行して、使用方法を確認してください。
編集
Bootstrap 4 alpha 5 の時点で、データ構造は少し異なります。popover.config.content代わりに使用する必要がありますpopover.options.content
@kfriend さん、コメントありがとうございます
ブートストラップ 3 では:
if($el.data('bs.popover')) {
$el.data('bs.popover').options.content = "New text";
}
$el.popover('show');
シンプルなソリューション
これで試すことができます：
//Bootstrap v3.3.7
var popoverEl = $("#popover");
popoverEl.attr("data-content", "NEW CONTENT");
popoverEl.popover("show");
ありがとう。
@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();
}
再配置されず、新しいコンテンツの高さが異なる場合、ポップオーバーは下に拡大し、矢印はターゲットから外れます!
また、後でボタンをクリックすると、ポップオーバーを閉じるのではなく、再度開きます。上記のコードは、その問題も解決します。
(私の編集は却下されたので、ここに投稿しようと思いました..)
ポップオーバーが正しく初期化された後、jquery を直接使用してclass="popover-content"要素を置き換えることができます。
$(".popover-content").html('a nice new content')
ブートストラップ 3.1.1 の非同期ポップオーバーを作成しました。私はちょうどそれを呼んだpopoverasync。ここにデモンストレーションがあります：
デモのソースは次の場所からダウンロードできます。
私にとっての秘訣は、getContentこの非同期ポップオーバーのメソッドを記述して、コンテンツを取得するためのユーザーの JavaScript 関数が呼び出されるようにすることでしたgetContentが、待機アニメーションを同期的に呼び出し元に返しgetContentます。このように、ポップオーバーにはどちらの方法でもコンテンツがあります。最初はユーザーが待っている間、最後はコンテンツが到着したときです。私が言及しているものextensions.jsは、デモ ソース内にあります。
これがお役に立てば幸いです！
ダン
<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>
$('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();
});