[解決済み] BootstrapのポップオーバーのコンテンツをAJAXで読み込む。これは可能ですか?
2023-03-17 02:43:34
質問
私が試したことのうち、適切なものはここにあります。
<a href="#" data-content="<div id='my_popover'></div>"> Click here </a>
$(".button").popover({html: true})
$(".button").click(function(){
$(this).popover('show');
$("#my_popover").load('my_stuff')
})
クリックすると、リクエストは行われますが、ポップオーバーには入力されません。ポップオーバーのHTMLがDOMに追加されるのさえ見えませんが、これはfirebugのせいかもしれません。
誰かこれを試したことがありますか?
どのように解決するのですか?
私のブログの記事で解決策を紹介しています。 https://medium.com/cagataygurturk/load-a-bootstrap-popover-content-with-ajax-8a95cd34f6a4
まず、ポップオーバーを追加したい要素に data-poload 属性を追加します。 を追加します。この属性の内容は次のとおりです。 を指定します(絶対または相対)。
<a href="#" title="blabla" data-poload="/test.php">blabla</a>
<ブロッククオート
そして、JavaScriptでは、できれば$(document).ready()で。
$('*[data-poload]').hover(function() {
var e=$(this);
e.off('hover');
$.get(e.data('poload'),function(d) {
e.popover({content: d}).popover('show');
});
});
<ブロッククオート
off('hover')
は、データの複数回読み込みを防止し
popover()
は
は新しいホバーイベントをバインドします。もし、ホバーイベントごとにデータを更新したい場合は
でデータを更新したい場合は、offを削除する必要があります。
動作中の JSFiddle をご覧ください。
関連
-
[解決済み] ブートストラップポップオーバーを動的要素に結合する方法
-
[解決済み] JavaScript - 二重引用符のエスケープ
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] jQueryを使って「Please Wait, Loading...」というアニメーションを作成するにはどうすればよいですか?
-
[解決済み] jQueryでPUT/DELETEリクエストを送信する方法は?
-
[解決済み] jQueryを使ってロールオーバー時に画像ソースを変更する
-
[解決済み] jQuery: テキストで要素を検索する
-
[解決済み】jQueryのテンプレートエンジン【終了しました
-
[解決済み] Twitter Bootstrapのポップオーバーをページ上の任意の場所(他の場所)からクリックして閉じるにはどうすればよいですか?
-
[解決済み] TwitterのPopoverでdivをコンテンツとして使用することは可能ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Uncaught TypeError: 未定義のプロパティ 'length' を読み取れませんでした。
-
[解決済み] jQuery に何かを実行する前にすべての画像の読み込みを待つように指示する公式な方法
-
[解決済み] jQuery.ajaxでmultipart/formdataを送信する。
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] Twitter Bootstrapのモーダルウィンドウを閉じないようにする
-
[解決済み] jQuery: テーブルの行数を数える
-
[解決済み] WebKit の event.layerX と event.layerY に関する問題
-
[解決済み] チェックボックスがチェックされた場合のjQuery
-
[解決済み] jQueryでval()がchange()をトリガーしない
-
[解決済み] jQuery append() - 追記された要素を返す