Modal remote bootstrap Twitter menampilkan konten yang sama setiap kali


263

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.


Perbaikan yang sama, tetapi dimodifikasi untuk Bootstrap 3. Bootstrap 3 memperkenalkan ruang nama. plnkr.co/edit/HWSgSw?p=preview
Jeff H

5
Perhatikan bahwa remoteModals sudah usang pada Bootstrap v3.2.1 dan akan hilang di v4.
cvrebert

Jawaban:


447

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.


1
@VladimirStarkov Maaf tentang itu - sepertinya saya lupa hidekelas pada modal, jadi jika jendela Anda terlalu kecil, modal mungkin telah memblokir acara mouse pada tombol. Untuk beberapa alasan, JSFiddle.net benar-benar buruk pagi ini (ada 504 yang mencoba memperbarui), jadi saya hanya mengulangi contohnya di plnkr.co, yang lebih baik untuk AJAX.
merv

3
ada satu masalah lain: .modal-body akan tetap memiliki teks di dalamnya, jadi saya menambahkan: <CODE> $ ('# myModal .modal-body'). teks ("Memuat ...") </CODE> di pendengar acara tersembunyi
rbp

5
bs.modaldi $(this).removeData('bs.modal')bekerja untuk saya dengan Bootstrap 3
jvannistelrooy

2
Kode kerja penuh untuk Boostrap 3 adalah$('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });
Christophe Fondacci

1
Saya juga akan memeriksa apakah modal yang disembunyikan dimuat dari sumber jarak jauh, agar tidak merusak modal dengan konten statis: var modalData = $(this).data('bs.modal'); if (modalData && modalData.options.remote)...
Wojtek Kruszewski

171

Untuk bootstrap 3 Anda harus menggunakan:

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

17
Pahlawanku. Sukai perubahan tak berdokumen ini.
Jorin

2
Ini sangat membantu. Bootstrap 3 tidak kompatibel ke belakang dan sebagian besar konten di SO (atau forum lain) adalah tentang BS <3, mencoba solusi tersebut menghabiskan banyak waktu.
Swapnil

7
Tidak sempurna: secara singkat menampilkan konten lama sebelum konten baru.
Laurent

3
Jika Anda ingin mengosongkan modal menggunakan contoh di atas, Anda harus dapat menambahkan berikut sebelum atau setelah remoteDatabaris:$(this).empty()
jgillman

11
Anda seharusnya tidak menggunakannya $(this).empty(). The remotepilihan beban data remote ke bersarang <div class="modal-content">elemen. Gunakan $('.modal-content', this).empty();sebagai gantinya.
Gavin

50

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

Pada halaman jarak jauh pastikan Anda tidak memuat bootstrap, atau pustaka jquery. Ini akan membunuh referensi apa pun dan meninggalkan Anda dengan modal kosong.
Bankzilla

Ini tidak berhasil untuk saya. Ini kode saya yang berfungsi: $ (dokumen) .on ("hidden.bs.modal", ".modal", function (e) {if (! $ (E.target) .is (". Local-modal ")) {$ (e.target) .removeData (" bs.modal "). find (". modal-content "). empty ();}});
Kevin

Ketika saya menggunakannya $(e.target).removeData("bs.modal").find(".modal-content").empty();seperti modal saya entah bagaimana menjadi tersembunyi dan hanya lapisan abu-abu yang muncul.
Axel

30

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

21

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

14

Ini bekerja dengan Bootstrap 3 FYI

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

7

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

5

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

Solusi 3.2 adalah satu-satunya hal yang bekerja dengan baik untuk saya di Bootstrap 3.1 - menggunakan pendekatan tubuh, beberapa acara saya tentang modal menjadi tidak mengalami perubahan.
StuartQ

3

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

2

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.


2
ini adalah satu-satunya hal yang berhasil bagi saya dengan BS 3.3.6. juga menggunakan template setang. Saya sarankan menggunakan dokumen, bukan tubuh.
dbinott

1

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


1

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

1

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

Sejauh ini, inilah jawaban paling sederhana yang saya temukan. Tidak ada yang rumit tentang jawabannya, beberapa baris kode dan mudah ditafsirkan. Bekerja sempurna pertama kali dengan mengacaukannya.
Tarquin

0

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

0

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.


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

Yang ini bekerja untuk saya.


0

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

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


0

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


0

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


-1

Diuji pada Bootstrap versi 3.3.2

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

1
Ini solusi yang mengerikan. Memanggil .removeData()tanpa parameter akan memberitahu jquery untuk menghapus semua data yang dilampirkan ke elemen itu. Sejauh masalah OP yang bersangkutan, .removeData('bs.modal')atau .removeData('modal')akan cukup dan sangat aman.
Julian Paolo Dayag

-4

Semoga beruntung dengan yang satu ini:

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

2
ini tidak berguna. memuat ulang halaman bukanlah solusi.
dbinott
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.