Twitterのブートストラップリモートモードは毎回同じコンテンツを表示します
私はTwitterのブートストラップを使用しています、私はモーダルを指定しました
<div class="modal hide" id="modal-item">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Update Item</h3>
</div>
<form action="http://www.website.com/update" method="POST" class="form-horizontal">
<div class="modal-body">
Loading content...
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Update Item</button>
</div>
</form>
</div>
そしてリンク
<a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>
これらのリンクのいずれかを初めてクリックしたときには正しいコンテンツが表示されますが、他のリンクをクリックしたときに最初にロードされたのと同じコンテンツが表示されても、コンテンツは更新されません。
クリックするたびに更新されるようにします。
P.S:カスタムのjQuery関数で簡単に機能させることはできますが、ネイティブのBootstrapモーダルリモート関数で可能かどうかを知りたいのですが、それは十分に簡単なはずなので、私は物事を複雑にしていると思います。
問題は2つあります。
最初の、一度Modalオブジェクトがインスタンス化されると、それはdata-target
で指定された要素とそれに続く呼び出しに永続的にアタッチされ、modalはそれに対してtoggle()
のみを呼び出すがoptions
name__内の値。そのため、href
name__属性がリンクによって異なる場合でも、モーダルが切り替えられても、remote
name__の値は更新されません。ほとんどの場合、オブジェクトを直接編集することでこれを回避できます。例えば:
$('#myModal').data('bs.modal').options.remote = "http://website.com/item/7";
しかし、この場合はうまくいきません。
2番目、ModalプラグインはリモートリソースをModalオブジェクトのコンストラクタにロードするように設計されています。 options.remote
に変更が加えられ、は再ロードされません。
簡単な解決策は、その後の切り替えの前にモーダルオブジェクトを破棄することです。 1つの選択肢は、隠れた後にそれを破壊することです。
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
注:必要に応じてセレクターを調整してください。これが最も一般的です。
プランカー
または、モーダルを起動しているリンクが前のリンクと異なるかどうかを確認するなどの、もっと複雑な方法を考えてみることもできます。もしそうなら、破壊する。そうでない場合は、リロードする必要はありません。
ブートストラップ3の場合は、次のものを使用してください。
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
Bootstrap 3.1では、リモートコンテンツがロードされるのを待っている間、ちらつきを避けるためにデータ全体を削除し、ダイアログ全体ではなくmodal-content
を空にする必要があります(3.0)。
$(document).on("hidden.bs.modal", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
あなたがリモートではないモーダルを使用しているなら、上記のコードは、もちろん、いったん閉じられた(悪い)それらの内容を削除します。影響を受けないように、これらのモーダルに何かを追加する必要があるかもしれません(.local-modal
クラスなど)。次に上記のコードを修正してください。
$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
ありがとう、merv。私はbootstrap.jsをいじくり始めましたが、あなたの答えは迅速でクリーンな回避策です。これが私のコードで使用したものです。
$('#modal-item').on('hidden', function() {
$(this).removeData('modal');
});
受け入れられた答えは私のためにうまくいきませんでした、それで私はそれをするためにJavaScriptと行きました。
<a href="/foo" class="modal-link">
<a href="/bar" class="modal-link">
<script>
$(function() {
$(".modal-link").click(function(event) {
event.preventDefault()
$('#myModal').removeData("modal")
$('#myModal').modal({remote: $(this).attr("href")})
})
})
これはBootstrap 3 FYIで動作します
$('#myModal').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
私のプロジェクトはYiiでビルドされており、Bootstrap-Yiiプラグインを使用しているので、この答えはYiiを使用している場合にのみ該当します。
上記の修正は機能しましたが、モーダルが最初に表示された後に限られます。初めて空になった。私がコードを始めた後、Yiiがモーダルのhide関数を呼び出し、それによって私の初期化変数をクリアしたからだと思います。
モーダルを起動したコードの直前にremoveData呼び出しを入れるとうまくいくことがわかりました。だから私のコードはこのように構成されています...
$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});
Bootstrap 3.2.0では、 "on"イベントがドキュメント上になければならず、モーダルを空にする必要があります。
$(document).on("hidden.bs.modal", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
Bootstrap 3.1.0では、 "on"イベントは本体にあります。
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
BS 3でもっと一般的にしないのはなぜでしょうか。モーダルDIVのIDとして "[something] modal"を使うだけです。
$("div[id$='modal']").on('hidden.bs.modal',
function () {
$(this).removeData('bs.modal');
}
);
私のための唯一の作業オプションは次のとおりです。
$('body').on('hidden.bs.modal', '#modalBox', function () {
$(this).remove();
});
私はBootstrap 3を使い、モーダルボックスのHTMLを追加するpopup('popup content')
という関数を持っています。
$(this).html( '')を追加します。目に見えるデータもクリアするために、そしてそれはかなりうまく働きます
古いコンテンツは新しいコンテンツが表示されるまで表示されるため、.modal-contentの内側に.html( '')を付けるとHTMLがクリアされるので、このような機能を追加しました。
$('#myModal').on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal');
$('#myModal').find('.modal-content').html('');
});
リモートURLが提供されている場合、コンテンツはjQueryのloadメソッドを介して一度ロードされ、.modal-content divに挿入されます。 data-apiを使用している場合は、代わりにhref属性を使用してリモートソースを指定することもできます。その一例を以下に示します。
$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});
$('#myModal').on('hidden.bs.modal', function () {
$(this).removeData('modal');
});
これは私のために働きます。
この他のアプローチは私にはうまくいきます。
$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
Bootstrap 3では、modal.jsで次のように変更しました。
$(document)
.on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })
に
$(document)
.on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal').empty()
$(document.body).removeClass('modal-open')
})
(明確にするために余分なスペースが追加されています)
これにより、モーダルコンテナでempty()を呼び出してデータを削除することで、古いモーダルコンテンツの不要なフラッシュを防止します。
@mervによって受け入れられた回答の拡張版。また、非表示になっているモーダルがリモートソースからロードされているかどうかをチェックし、古いコンテンツがクリアされてフラッシュされないようにします。
$(document).on('hidden.bs.modal', '.modal', function () {
var modalData = $(this).data('bs.modal');
// Destroy modal if has remote source – don't want to destroy modals with static content.
if (modalData && modalData.options.remote) {
// Destroy component. Next time new component is created and loads fresh content
$(this).removeData('bs.modal');
// Also clear loaded content, otherwise it would flash before new one is loaded.
$(this).find(".modal-content").empty();
}
});
https://Gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5
これは私のために働く:
モーダル
<div class="modal fade" id="searchKaryawan" tabindex="-1" role="dialog" aria-labelledby="SearchKaryawanLabel" aria-hidden="true"> <div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="SearchKaryawanLabel">Cari Karyawan</h4>
</div>
<div class="modal-body">
<input type="hidden" name="location">
<input name="cariNama" type="text" class="form-control" onkeyup="if (this.value.length > 3) cariNikNama();" />
<div class="links-area" id="links-area"></div>
</div>
<div class="modal-footer">
</div>
</div> </div></div>
スクリプト
<script type="text/javascript">$('body').on('hidden.bs.modal', '.modal', function () { $(".links-area").empty() }); </script>
リンクエリアは私がデータを入れてクリアする必要があるエリアです。
$('body').on('hidden.bs.modal', '.modal', function () {
$("#mention Id here what you showed inside modal body").empty()
});
どのHTML要素を空にしたいか(div、spanなんでも)。
私はモーダルの爽快さを扱う簡単なスニペットを書きました。基本的に、クリックされたリンクをモーダルのデータに格納し、クリックされたのと同じリンクかどうかを確認し、モーダルデータを削除するかどうかを確認します。
var handleModal = function()
{
$('.triggeringLink').click(function(event) {
var $logsModal = $('#logsModal');
var $triggeringLink = $logsModal.data('triggeringLink');
event.preventDefault();
if ($logsModal.data('modal') != undefined
&& $triggeringLink != undefined
&& !$triggeringLink.is($(this))
) {
$logsModal.removeData('modal');
}
$logsModal.data('triggeringLink', $(this));
$logsModal.modal({ remote: $(this).attr('href') });
$logsModal.modal('show');
});
};