Modal remote bootstrap Twitter menampilkan konten yang sama setiap kali

Saya menggunakan bootstrap Twitter, saya telah menentukan modal

<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>

Dan tautannya

<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>

Ketika saya mengklik salah satu tautan ini untuk pertama kalinya, saya melihat konten yang benar, tetapi ketika saya mengklik tautan lain itu menunjukkan konten yang sama dimuat untuk pertama kalinya, itu tidak memperbarui konten.

Saya ingin diperbarui setiap kali diklik.

PS: Saya dapat dengan mudah membuatnya bekerja melalui fungsi jQuery kustom, tapi saya ingin tahu apakah itu mungkin dengan fungsi remote asli Bootstrap modal, karena itu harus cukup mudah dan saya kira saya hanya mempersulit.

Masalahnya adalah dua kali lipat.

Pertama , setelah objek Modal dipakai, itu terus melekat pada elemen yang ditentukan oleh data-targetdan panggilan berikutnya untuk menunjukkan bahwa modal hanya akan memanggilnya toggle(), tetapi tidak akan memperbarui nilai dalam options. Jadi, meskipun hrefatribut berbeda pada tautan Anda yang berbeda, ketika modalnya diubah, nilai untuknya remotetidak diperbarui. Untuk sebagian besar opsi, seseorang dapat menyiasatinya dengan langsung mengedit objek. Misalnya:

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

Namun, itu tidak akan berfungsi dalam kasus ini, karena ...

Kedua , plugin Modal dirancang untuk memuat sumber daya jarak jauh di konstruktor objek Modal, yang sayangnya berarti bahwa bahkan jika perubahan dibuat ke options.remote, itu tidak akan pernah dimuat ulang .

Obat sederhana adalah dengan menghancurkan objek Modal sebelum matikan berikutnya. Salah satu pilihan adalah menghancurkannya setelah selesai bersembunyi:

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

_{Catatan: Sesuaikan penyeleksi sesuai kebutuhan. Ini yang paling umum.}

Plunker

Atau Anda dapat mencoba membuat skema yang lebih rumit untuk melakukan sesuatu seperti memeriksa apakah tautan yang meluncurkan modal berbeda dari yang sebelumnya. Jika ya, hancurkan; jika tidak, maka tidak perlu memuat ulang.

Untuk bootstrap 3 Anda harus menggunakan:

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

Untuk Bootstrap 3.1 Anda ingin menghapus data dan mengosongkan modal-contentdialog daripada keseluruhan (3.0) untuk menghindari flicker sambil menunggu konten jarak jauh dimuat.

$(document).on("hidden.bs.modal", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

Jika Anda menggunakan non-remote modals maka kode di atas, tentu saja, akan menghapus kontennya setelah ditutup (buruk). Anda mungkin perlu menambahkan sesuatu ke modals tersebut (seperti .local-modalkelas) agar tidak terpengaruh. Kemudian modifikasi kode di atas menjadi:

$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

Terima kasih merv. Saya mulai bermain-main dengan boostrap.js tetapi jawaban Anda cepat dan bersih. Inilah yang akhirnya saya gunakan dalam kode saya.

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

Jawaban yang diterima tidak berhasil untuk saya, jadi saya menggunakan JavaScript untuk melakukannya.

<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")})
    })
})

Ini bekerja dengan Bootstrap 3 FYI

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

Proyek saya dibangun di Yii & menggunakan plugin Bootstrap-Yii, jadi jawaban ini hanya relevan jika Anda menggunakan Yii.

Perbaikan di atas berhasil tetapi hanya setelah pertama kali modal ditampilkan. Pertama kali kosong. Saya pikir itu karena setelah inisiasi saya kode Yii memanggil fungsi sembunyikan modal sehingga membersihkan variabel inisiasi saya.

Saya menemukan bahwa meletakkan panggilan removeData segera sebelum kode yang meluncurkan modal melakukan trik. Jadi kode saya terstruktur seperti ini ...

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

Dalam Bootstrap 3.2.0 acara "on" harus ada di dokumen dan Anda harus mengosongkan modal:

$(document).on("hidden.bs.modal", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

Di Bootstrap 3.1.0 acara "on" bisa berada di badan:

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

Mengapa tidak membuatnya lebih umum dengan BS 3? Cukup gunakan "[sesuatu] modal" sebagai ID dari modal DIV.

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

Hanya opsi yang berfungsi bagi saya adalah:

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

Saya menggunakan Bootstrap 3 dan saya memiliki fungsi yang disebut popup('popup content') yang menambahkan kotak modal html.

Menambahkan $ (ini) .html (''); untuk menghapus data yang terlihat juga, dan berfungsi cukup baik

Jika URL jarak jauh disediakan, konten akan dimuat satu kali melalui metode muat jQuery dan disuntikkan ke div .modal-content. Jika Anda menggunakan data-api, Anda dapat menggunakan atribut href sebagai alternatif untuk menentukan sumber jarak jauh. Contohnya ditunjukkan di bawah ini

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

Saya telah menambahkan sesuatu seperti ini, karena konten yang lebih lama ditampilkan hingga yang baru muncul, dengan .html ('') di dalam .modal-content akan menghapus HTML di dalamnya, semoga membantu

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

Saya menulis cuplikan sederhana yang menangani penyegaran modal. Pada dasarnya ia menyimpan tautan yang diklik dalam data modal dan memeriksa apakah tautan yang sama telah diklik, menghapus atau tidak, data modal.

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

Untuk Bootstrap 3, di modal.js saya berubah:

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })

untuk

$(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')
  })

(spasi ekstra ditambahkan untuk kejelasan)

Ini mencegah flash yang tidak diinginkan dari konten modal lama dengan memanggil empty () pada wadah modal serta menghapus data.

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

Yang ini bekerja untuk saya.

Pendekatan lain ini bekerja dengan baik untuk saya:

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

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

Elemen html mana yang ingin Anda kosongkan (div, span, span)

Yang ini bekerja untuk saya:

modal

<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>

naskah

<script type="text/javascript">$('body').on('hidden.bs.modal', '.modal', function () {  $(".links-area").empty() }); </script>

link-area adalah area tempat saya meletakkan data dan perlu menghapus

Versi diperluas dari jawaban yang diterima oleh @merv. Itu juga memeriksa apakah modal yang disembunyikan dimuat dari sumber jarak jauh dan membersihkan konten lama untuk mencegahnya berkedip.

$(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

Diuji pada Bootstrap versi 3.3.2

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

Semoga beruntung dengan yang satu ini:

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