Twitterブートストラップリモートモーダルで毎回同じコンテンツが表示される


263

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>

これらのリンクのいずれかを初めてクリックしたときに正しいコンテンツが表示されますが、他のリンクをクリックしたときに初めてロードされたのと同じコンテンツが表示されても、コンテンツは更新されません。

クリックするたびに更新してほしい。

PS:カスタムjQuery関数を介して簡単に機能させることができますが、ネイティブのBootstrapモーダルリモート関数を使用してそれが可能かどうかを知りたいのです。


同じ修正ですが、Bootstrap 3用に変更されています。Bootstrap3では名前空間が導入されています。plnkr.co/edit/HWSgSw?p=preview
Jeff H

5
remoteモーダルはBootstrap v3.2.1で非推奨になり、v4で廃止されることに注意してください。
cvrebert 2014

回答:


447

問題は2つあります。

最初に、モーダルオブジェクトがインスタンス化されるdata-targetと、それはによって指定された要素に永続的にアタッチされ、モーダルがそれを呼び出すだけでtoggle()、の値は更新されないことを示しますoptions。したがって、hrefリンクによって属性が異なる場合でも、モーダルが切り替えられても、の値remoteは更新されません。ほとんどのオプションでは、オブジェクトを直接編集することでこれを回避できます。例えば:

$('#myModal').data('bs.modal').options.remote = "http://website.com/item/7";

ただし、この場合は機能しません。

第二に、モーダルプラグインは、リモートリソースをロードするように設計されたコンストラクタに変更がにしても、残念ながら手段はモーダルオブジェクトのoptions.remoteそれが再ロードされません

簡単な解決策は、その後の切り替えの前にモーダルオブジェクトを破棄することです。1つのオプションは、非表示が完了した後にそれを破棄することです。

$('body').on('hidden.bs.modal', '.modal', function () {
  $(this).removeData('bs.modal');
});

注:必要に応じてセレクターを調整します。これが最も一般的です。

プランカー

または、モーダルを起動するリンクが前のリンクと異なるかどうかを確認するなど、より複雑なスキームを考え出すこともできます。もしそうなら、破壊してください。そうでない場合は、リロードする必要はありません。


1
@VladimirStarkov申し訳ありません- hideモーダルのクラスを忘れたようです。ウィンドウが小さすぎると、モーダルがボタンのマウスイベントをブロックしている可能性があります。どういうわけか、JSFiddle.netは今朝本当に悪い(504を更新しようとした)ので、とにかくAJAXに適しているplnkr.coの例をやり直しました。
merv、2014年

3
もう1つの問題があります。.modal-bodyにはまだテキストが含まれているため、次のように追加しました:<CODE> $( '#myModal .modal-body')。text( "Loading ...")</ CODE>非表示のイベントリスナー
rbp

5
bs.modal$(this).removeData('bs.modal')Bootstrap 3で私のために働いた
jvannistelrooy 2013

2
Boostrap 3の完全な動作コードは$('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });
Christophe Fondacci 2014年

1
モーダルビーイングリモートソースからロードされた隠された場合、私はまたように静的コンテンツとモーダルを壊さないように、チェックします: var modalData = $(this).data('bs.modal'); if (modalData && modalData.options.remote)...
WojtekさんKruszewski

171

ブートストラップ3の場合、以下を使用する必要があります。

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

17
私のヒーロー。これらの文書化されていない変更が大好きです。
ジョリン2013

2
これは非常に役立ちました。Bootstrap 3には下位互換性がなく、SO(または他のフォーラム)のコンテンツの大部分はBS <3程度です。これらのソリューションを試すと、実際には多くの時間が無駄になります。
Swapnil 2013

7
完璧ではありません:新しいコンテンツの前に古いコンテンツが簡単に表示されます。
Laurent

3
あなたは上記の例を使用してモーダルを空にしたい場合は、前または後のいずれかに以下を追加することができるはずremoteData行:$(this).empty()
jgillman

11
は使用しないでください$(this).empty()。このremoteオプションは、ネストされた<div class="modal-content">要素にリモートデータをロードします。$('.modal-content', this).empty();代わりに使用してください。
Gavin 14

50

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

リモートページで、ブートストラップまたはjqueryライブラリをロードしていないことを確認してください。それはすべての参照を殺し、空の空のモーダルを残します。
Bankzilla 2014

これではうまくいきませんでした。これが機能している私のコードです:$(document).on( "hidden.bs.modal"、 ".modal"、function(e){if(!$(e.target).is( "。local-modal ")){$(e.target).removeData(" bs.modal ")。find("。modal-content ")。empty();}});
ケビン

使用する$(e.target).removeData("bs.modal").find(".modal-content").empty();と、モーダルが何らかの理由で非表示になり、グレーのオーバーレイのみが表示されるようになります。
Axel

30

mervに感謝します。boostrap.jsをいじくり回し始めましたが、あなたの答えはすばやくクリーンな回避策です。これが私のコードで最終的に使用したものです。

$('#modal-item').on('hidden', function() {
    $(this).removeData('modal');
});

21

受け入れられた答えは私にとってはうまくいかなかったので、私はそれを行うために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")})
    })
})

14

これはBootstrap 3 FYIで動作します

$('#myModal').on('hidden.bs.modal', function () {
  $(this).removeData('bs.modal');
});

7

私のプロジェクトはYiiで構築されており、Bootstrap-Yiiプラグインを使用しているため、この回答はYiiを使用している場合にのみ該当します。

上記の修正は機能しましたが、モーダルが初めて表示された後でのみです。初めて空になった。それは、コードを開始した後、Yiiがモーダルの非表示関数を呼び出し、それによって開始変数をクリアしたためだと思います。

モーダルを起動するコードの直前にremoveData呼び出しを置くことがトリックを実行することがわかりました。だから私のコードはこのように構造化されています...

$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});

5

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

3.2ソリューションは、Bootstrap 3.1で私にとって適切に機能する唯一のものでした。ボディアプローチを使用すると、モーダルでの私のイベントの一部がフックされなくなりました。
StuartQ 2014年

3

BS 3でもっと一般的にしてみませんか?モーダルDIVのIDとして「[something] modal」を使用するだけです。

$("div[id$='modal']").on('hidden.bs.modal',
    function () {
        $(this).removeData('bs.modal');
    }
);

2

私のための唯一の働くオプションは:

$('body').on('hidden.bs.modal', '#modalBox', function () {
    $(this).remove();
});

私はBootstrap 3を使用していますがpopup('popup content') 、モーダルボックスhtmlを追加するという関数が あります。


2
これは私にとってBS 3.3.6で機能した唯一のものです。ハンドルバーテンプレートも使用します。ただし、本文の代わりにドキュメントを使用することをお勧めします。
dbinott 2016

1

$(this).html( '');を追加する 可視データもクリアし、それはかなりうまくいきます


1

リモートURLが提供されている場合、コンテンツはjQueryのloadメソッドを介して1回読み込まれ、.modal-content divに挿入されます。data-apiを使用している場合は、代わりにhref属性を使用してリモートソースを指定できます。この例を以下に示します

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

1

このようなものを追加しました。古いコンテンツは新しいコンテンツが表示されるまで表示されます。

$('#myModal').on('hidden.bs.modal', function () {
   $('#myModal').removeData('bs.modal');
   $('#myModal').find('.modal-content').html('');
});

これは、私が見つけた最も簡単な実用的な答えです。答えは複雑ではなく、数行のコードで解釈が簡単です。それをいじることで初めて完全に働いた。
Tarquin

0

モーダルの更新を処理する簡単なスニペットを書きました。基本的には、クリックされたリンクをモーダルのデータに保存し、クリックされたリンクと同じリンクであるかどうかを確認し、モーダルデータを削除するかどうかをチェックします。

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

0

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()を呼び出してデータを削除することにより、古いモーダルコンテンツの不要なフラッシュを防ぎます。


0
        $('#myModal').on('hidden.bs.modal', function () {
            $(this).removeData('modal');
        });

これは私のために働きます。


0

この他のアプローチは私にはうまくいきます:

$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});

0
$('body').on('hidden.bs.modal', '.modal', function () {
       $("#mention Id here what you showed inside modal body").empty()
});

空にするHTML要素(div、spanなど)。


0

これは私のために働きます:

モーダル

<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">&times;</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>

リンク領域は、データを配置し、クリアする必要がある領域です


0

@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


-1

Bootstrapバージョン3.3.2でテスト済み

  $('#myModal').on('hide.bs.modal', function() {
    $(this).removeData();
  });

1
これはひどい解決策です。.removeData()パラメータなしで呼び出すと、jqueryはその要素に添付されているすべてのデータを削除します。OPの問題に関する限り、.removeData('bs.modal')または.removeData('modal')十分であり、非常に安全です。
ジュリアンパオロダヤグ

-4

これで頑張ってください:

$('#myModal').on('hidden.bs.modal', function () {
    location.reload();
});

2
これは役に立たない。ページのリロードは解決策ではありません。
dbinott 2016
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.