Reload konten di modal (twitter bootstrap)

Saya menggunakan popup modal bootstrap twitter.

<div id="myModal" class="modal hide fade in">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Header</h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <input type="submit" class="btn btn-success" value="Save"/>
    </div>
</div>

Saya dapat memuat konten menggunakan ajax dengan a-element ini:

<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>

Sekarang saya harus membuka modal yang sama tetapi menggunakan url yang berbeda. Saya menggunakan modal ini untuk mengedit entitas dari database saya. Jadi ketika saya mengklik edit pada entitas saya perlu memuat modal dengan ID.

<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a>

Jika saya mengklik tautan nomor 1, itu berfungsi dengan baik. Tetapi jika saya kemudian mengklik tautan nomor 2, konten modal sudah dimuat dan untuk itu akan menampilkan konten dari tautan nomor 1.

Bagaimana cara menyegarkan atau mereset konten yang dimuat ajax di popup modal bootstrap twitter?

Saya mengalami masalah yang sama, dan saya rasa cara melakukannya adalah dengan menghapus atribut data-toggle dan memiliki penangan khusus untuk tautan.

Sesuatu di baris:

$("a[data-target=#myModal]").click(function(ev) {
    ev.preventDefault();
    var target = $(this).attr("href");

    // load the url and show modal on success
    $("#myModal .modal-body").load(target, function() { 
         $("#myModal").modal("show"); 
    });
});

Akan mencobanya nanti dan mengirim komentar.

Untuk membongkar data saat modal ditutup, Anda dapat menggunakan ini dengan Bootstrap 2.x:

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

Dan di Bootstrap 3 ( https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516 ):

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

//Edit SL: more universal
$(document).on('hidden.bs.modal', function (e) {
    $(e.target).removeData('bs.modal');
});

Anda dapat memaksa Modal untuk menyegarkan popup dengan menambahkan baris ini di akhir metode sembunyikan plugin Modal (Jika Anda menggunakan bootstrap-transisi.js v2.1.1, itu harus di baris 836)

this.$element.removeData()

Atau dengan pendengar acara

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

Dengan Bootstrap 3 Anda dapat menggunakan event handler 'hidden.bs.modal' untuk menghapus data terkait modal, memaksa popup untuk memuat ulang lain kali:

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

Berdasarkan jawaban lain (terima kasih semuanya).

Saya perlu menyesuaikan kode agar berfungsi, karena hanya memanggil .html menghapus seluruh konten dan modal tidak akan dimuat dengan konten apa pun setelah saya melakukannya. Jadi saya hanya mencari area konten dari modal dan menerapkan pengaturan ulang HTML di sana.

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

Masih mungkin pergi dengan jawaban yang diterima karena saya mendapatkan beberapa lompatan jelek sebelum modal dimuat karena kontrolnya dengan Bootstrap.

Sedikit lebih padat daripada contoh yang diterima di atas. Ambil target dari data-target dari apa pun yang diklik saat ini dengan data-toggle = modal on. Ini membuatnya jadi Anda tidak perlu tahu apa id dari modal target itu, cukup gunakan kembali yang sama! lebih sedikit kode = menang! Anda juga dapat memodifikasi ini untuk memuat judul, label dan tombol untuk modal Anda jika Anda mau.

 $("[data-toggle=modal]").click(function(ev) {
    ev.preventDefault();
    // load the url and show modal on success
    $( $(this).attr('data-target') + " .modal-body").load($(this).attr("href"), function() { 
         $($(this).attr('data-target')).modal("show"); 
    });
});

Contoh Tautan:

<a data-toggle="modal" href="/page/api?package=herp" data-target="#modal">click me</a>
<a data-toggle="modal" href="/page/api?package=derp" data-target="#modal">click me2</a>
<a data-toggle="modal" href="/page/api?package=merp" data-target="#modal">click me3</a>

Saya membuat sedikit perubahan pada jawaban Softlion , jadi semua modal saya tidak akan disegarkan di hide. Modal dengan atribut data-refresh = 'true' hanya disegarkan, yang lain berfungsi seperti biasa. Ini adalah versi modifikasi.

$(document).on('hidden.bs.modal', function (e) {
    if ($(e.target).attr('data-refresh') == 'true') {
        // Remove modal data
        $(e.target).removeData('bs.modal');
        // Empty the HTML of modal
        $(e.target).html('');
    }
});

Sekarang gunakan atribut seperti yang ditunjukkan di bawah ini,

<div class="modal fade" data-refresh="true" id="#modal" tabindex="-1" role="dialog" aria-labelledby="#modal-label" aria-hidden="true"></div>

Ini akan memastikan hanya modals dengan data-refresh = 'true' yang di-refresh. Dan saya juga menyetel ulang modal html karena nilai lama ditampilkan hingga nilai baru dimuat, membuat html kosong memperbaiki yang satu itu.

Ini adalah versi coffeescript yang cocok untuk saya.

$(document).on 'hidden.bs.modal', (e) ->
  target = $(e.target)
  target.removeData('bs.modal').find(".modal-content").html('')

Ini akan bekerja untuk semua versi twitterbootstrap

Kode Javascript:

<script type="text/javascript">
/* <![CDATA[ */
(function(){
   var bsModal = null;
   $("[data-toggle=modal]").click(function(e) {
      e.preventDefault();
      var trgId = $(this).attr('data-target'); 
      if ( bsModal == null ) 
       bsModal = $(trgId).modal;
      $.fn.bsModal = bsModal;
      $(trgId + " .modal-body").load($(this).attr("href"));
      $(trgId).bsModal('show');
    });
 })();
/* <![CDATA[ */
</script>

tautan ke modal adalah

<a data-toggle="modal" data-target="#myModal" href="edit1.aspx">Open modal 1</a>
<a data-toggle="modal" data-target="#myModal" href="edit2.aspx">Open modal 2</a>
<a data-toggle="modal" data-target="#myModal" href="edit3.aspx">Open modal 3</a>

pop up modal

<div id="myModal" class="modal hide fade in">
<div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save"/>
</div>

Saya juga terjebak pada masalah ini kemudian saya melihat bahwa id modalnya sama. Anda memerlukan ID modals yang berbeda jika Anda menginginkan banyak modals. Saya menggunakan id dinamis . Ini kode saya di haml:

.modal.hide.fade{"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}

kamu bisa melakukan ini

<div id="<%= some.id %>" class="modal hide fade in">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
  </div>
  <div class="modal-body"></div>
  <div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save" />
  </div>
</div>

dan tautan Anda ke modal akan menjadi

<a data-toggle="modal" data-target="#" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>

Saya harap ini akan berhasil untuk Anda.

Anda bisa mencoba ini:

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

Saya ingin konten yang dimuat AJAX dihapus ketika modal ditutup, jadi saya menyesuaikan baris yang disarankan oleh orang lain (sintaks skrip kopi):

$('#my-modal').on 'hidden.bs.modal', (event) ->
  $(this).removeData('bs.modal').children().remove()

var $ table = $ ('# myTable2');
$ table.bootstrapTable ('hancurkan');

Bekerja untuk saya

langkah 1: Buat pembungkus untuk modal yang dipanggil clone-modal-wrapper.

langkah 2: Buat div kosong bernama modal-wrapper.

Langkah 3: Salin elemen modal dari clone-modal-wrapperke modal-wrapper.

langkah 4: Alihkan modal modal-wrapper.

<a data-toggle="modal" class='my-modal'>Open modal</a>

<div class="clone-modal-wrapper">
   <div class='my-modal' class="modal fade">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <a class="close" data-dismiss="modal">×</a>
               <h3>Header</h3>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
               <input type="submit" class="btn btn-success" value="Save"/>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="modal-wrapper"></div>


$("a[data-target=#myModal]").click(function (e) {
    e.preventDefault();
    $(".modal-wrapper").html($(".clone-modal-wrapper").html());
    $('.modal-wrapper').find('.my-modal').modal('toggle');
});