Twitter bootstrap uzaktan mod her seferinde aynı içeriği gösterir

Twitter bootstrap kullanıyorum, bir mod belirledim

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

Ve bağlantılar

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

Bu bağlantılardan herhangi birini ilk kez tıkladığımda, doğru içeriği görüyorum, ancak diğer bağlantıları tıkladığımda ilk kez yüklenen aynı içeriği gösteriyor, içeriği güncellemiyor.

Her tıklandığında güncellenmesini istiyorum.

Not: Özel jQuery işlevi ile kolayca çalıştırabilirim, ancak yerel Bootstrap modal uzaktan kumanda işleviyle mümkün olup olmadığını bilmek istiyorum, çünkü yeterince kolay olmalı ve sanırım sadece işleri karmaşık hale getiriyorum.

Sorun iki yönlüdür.

İlk olarak , bir Modal nesnesi başlatıldıktan sonra, kalıcı olarak eklenir data-targetve sonraki modlar modalın yalnızca toggle()onu çağırdığını , ancak içindeki değerleri güncellemeyeceğini göstermek için çağrılır options. Bu nedenle, hrefözellikler farklı bağlantılarınızda farklı olsa da , mod değiştirildiğinde, değeri remotegüncellenmez. Çoğu seçenek için, doğrudan nesneyi düzenleyerek bunun üstesinden gelebilirsiniz. Örneğin:

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

Ancak, bu durumda işe yaramaz, çünkü ...

İkincisi , Modal eklentisi uzak kaynak yüklenmeye tasarlanmıştır yapıcısındaki bir değişiklik yapılır dahi maalesef vasıta Modal nesnenin options.remote, o yeniden asla .

Basit bir çözüm, sonraki geçişlerden önce Modal nesnesini yok etmektir. Bir seçenek saklanmayı bitirdikten sonra onu yok etmektir:

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

_{Not: Seçicileri gerektiği gibi ayarlayın. Bu en genel olanı.}

Plunker

Ya da, modal başlatan bağlantının öncekinden farklı olup olmadığını kontrol etmek gibi daha karmaşık bir şema bulmayı deneyebilirsiniz. Eğer öyleyse yok et; değilse, yeniden yüklemeye gerek yoktur.

Bootstrap 3 için şunları kullanmalısınız:

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

Bootstrap 3.1 modal-contentiçin, uzak içeriğin yüklenmesini beklerken titremeyi önlemek için tüm iletişim kutusunu (3.0) değil verileri kaldırmak ve boşaltmak isteyeceksiniz .

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

Uzak olmayan modları kullanıyorsanız, yukarıdaki kod, elbette, kapatıldıktan sonra içeriğini kaldırır (kötü). .local-modalEtkilenmemesi için bu tür modalara ( sınıf gibi) bir şeyler eklemeniz gerekebilir . Ardından yukarıdaki kodu şu şekilde değiştirin:

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

Teşekkürler. Boostrap.js çevresinde dolaşmaya başladım, ancak cevabınız hızlı ve temiz bir çözüm. İşte benim kod kullanarak sona erdi.

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

Kabul edilen cevap benim için çalışmadı, bu yüzden JavaScript ile gittim.

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

Bu Bootstrap 3 FYI ile çalışır

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

Projem Yii'de yerleşiktir ve Bootstrap-Yii eklentisini kullanır, bu nedenle bu cevap yalnızca Yii kullanıyorsanız geçerlidir.

Yukarıdaki düzeltme işe yaradı, ancak modal ilk kez gösterildikten sonra. İlk kez boş çıktı. Çünkü Yii kodunu başlattıktan sonra modun saklanma işlevini çağırdığı için başlatma değişkenlerimi temizledim.

Kalıcı kodu başlatan kod hemen önce removeData çağrısı koyarak hile yaptı buldum. Kodum şu şekilde yapılandırıldı ...

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

Bootstrap 3.2.0'da "on" olayı belgenin üzerinde olmalı ve kipi kapatmalısınız:

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

Bootstrap 3.1.0'da "on" olayı gövdede olabilir:

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

Neden BS 3 ile daha genel yapmıyorsunuz? Modsal DIV'nin kimliği olarak sadece "[bir şey] modsal" kullanın.

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

Benim için sadece çalışma seçeneği:

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

Bootstrap 3 kullanıyorum ve popup('popup content') mod kutusu html ekleyen adlı bir fonksiyon var .

Bir $ (this) .html ('') ekleme; görünür verileri de temizlemek için ve oldukça iyi çalışıyor

Uzak bir URL sağlanırsa, içerik jQuery'nin yükleme yöntemiyle bir kez yüklenecek ve .modal-içerik div'e enjekte edilecektir. Data-api'yi kullanıyorsanız, uzak kaynağı belirtmek için alternatif olarak href özelliğini de kullanabilirsiniz. Bunun bir örneği aşağıda gösterilmiştir

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

Bunun gibi bir şey ekledim, çünkü yeni içerik görünene kadar eski içerik gösteriliyor, .modal içeriğinin içindeki .html ('') içindeki HTML'yi temizleyecek,

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

Modalın yenilenmesini ele alan basit bir pasaj yazdım. Temel olarak, tıklanan bağlantıyı modun verilerinde saklar ve modla ilgili verilerin tıklatıldığını, kaldırıldığını veya kaldırılmadığını kontrol eder.

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

Bootstrap 3 için modal.js'de şunları değiştirdim:

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

için

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

(netlik için ekstra boşluk eklendi)

Bu, modal kapsayıcısında empty () öğesini çağırarak ve verileri kaldırarak istenmeyen eski modal içeriğin yanıp sönmesini önler.

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

Bu benim için çalışıyor.

Bu diğer yaklaşım benim için işe yarıyor:

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

Hangi html öğesini boşaltmak istediğinizi (div, ne olursa olsun).

Bu benim için çalışıyor:

kip

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

senaryo

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

links-alan, verileri koyduğum ve temizlenmesi gereken alandır

@Merv tarafından kabul edilen yanıtın genişletilmiş sürümü. Ayrıca gizli olan modun uzak kaynaktan yüklenip yüklenmediğini de kontrol eder ve yanıp sönmesini önlemek için eski içeriği temizler.

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

Bootstrap sürüm 3.3.2'de test edildi

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

Bunda iyi şanslar:

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