İçeriği modal olarak yeniden yükleyin (twitter bootstrap)

Twitter bootstrap'in kalıcı açılır penceresini kullanıyorum.

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

Bu a-elementi ile ajax kullanarak içerik yükleyebilirim:

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

Şimdi aynı modeli açmam gerekiyor, ancak farklı bir url kullanmalıyım. Veritabanımdaki bir varlığı düzenlemek için bu modeli kullanıyorum. Bu yüzden, bir varlıkta düzenle'yi tıkladığımda, modeli bir ID ile yüklemem gerekiyor.

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

1 numaralı bağlantıya tıklarsam iyi çalışıyor. Ancak daha sonra 2 numaralı bağlantıya tıklarsam, mod içeriği zaten yüklenmiştir ve bu nedenle 1 numaralı bağlantıdan içeriği gösterecektir.

Bir twitter önyükleme kalıcı açılır penceresindeki ajax yüklü içeriği nasıl yenileyebilirim veya sıfırlayabilirim?

Ben de aynı sorunu yaşıyorum ve sanırım bunu yapmanın yolu, data-toggle özniteliğini kaldırmak ve bağlantılar için özel bir işleyiciye sahip olmak olacak.

Şu satırlarda bir şey:

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

Daha sonra deneyecek ve yorum yazacak.

Modal kapalıyken verileri boşaltmak için bunu Bootstrap 2.x ile kullanabilirsiniz:

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

Ve Bootstrap 3'te ( 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');
});

Modal eklentisinin hide yönteminin sonuna bu satırı ekleyerek Modal'ı açılır pencereyi yenilemeye zorlayabilirsiniz (bootstrap-transition.js v2.1.1 kullanıyorsanız, satır 836'da olmalıdır)

this.$element.removeData()

Veya bir olay dinleyiciyle

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

Bootstrap 3 ile modla ilgili herhangi bir veriyi silmek için 'hidden.bs.modal' olay işleyicisini kullanabilir ve açılır pencereyi bir dahaki sefere yeniden yüklemeye zorlayabilirsiniz:

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

Diğer cevaplara göre (herkese teşekkürler).

Kodu çalışacak şekilde ayarlamam gerekiyordu, çünkü .html'yi çağırmak tüm içeriği sildi ve modal, yaptıktan sonra herhangi bir içerikle yüklenmedi. Bu yüzden, modalin içerik alanını aradım ve oradaki HTML sıfırlamasını uyguladım.

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

Kontrol Bootstrap ile olduğu gibi modal yüklenmeden hemen önce bazı çirkin atlamalar aldığım için hala kabul edilen cevaba gidebilirim.

Kabul edilen yukarıdaki örnekten biraz daha sıkıştırılmış. Data-toggle = modal on ile mevcut tıklanan herhangi bir şeyin veri hedefinden hedefi yakalar. Bu, onu hedef modelin kimliğinin ne olduğunu bilmenize gerek kalmaması için yapar, sadece aynı olanı tekrar kullanın! daha az kod = kazan! İsterseniz modalınız için başlık, etiket ve düğmeler yüklemek için bunu da değiştirebilirsiniz.

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

Örnek Bağlantılar:

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

Softlion cevabında küçük bir değişiklik yaptım , böylece tüm modallerim gizlendiğinde yenilenmeyecek. Data-renew = 'true' özniteliğine sahip kipler yalnızca yenilenir, diğerleri her zamanki gibi çalışır. İşte değiştirilmiş versiyon.

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

Şimdi özelliği aşağıda gösterildiği gibi kullanın,

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

Bu, yalnızca data-renew = 'true' olan modların yenilenmesini sağlar. Ayrıca modal html'yi de sıfırlıyorum çünkü eski değerler yenileri yüklenene kadar gösteriliyor, bu da html'de boş düzeltmeler yapıyor.

İşte benim için çalışan bir kahve dosyası versiyonu.

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

Twitterbootstrap'ın tüm sürümleri için çalışacak

Javascript kodu:

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

modal bağlantılar

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

modal açılır

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

Ben de bu soruna takılıp kaldım, sonra modelin kimliklerinin aynı olduğunu gördüm . Birden çok model istiyorsanız farklı model kimliklerine ihtiyacınız vardır . Dinamik kimlik kullandım . İşte kodum haml:

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

Bunu yapabilirsiniz

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

ve modal bağlantılarınız

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

Umarım bu sizin için işe yarar.

Bunu deneyebilirsiniz:

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

Modal kapandığında AJAX yüklü içeriğin kaldırılmasını istedim, bu yüzden başkaları tarafından önerilen satırı ayarladım (coffeescript sözdizimi):

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

var $ tablo = $ ('# myTable2');
$ table.bootstrapTable ('yok et');

Benim için çalıştı

1. adım: Çağrılan model için bir sarmalayıcı oluşturun clone-modal-wrapper.

2. adım: adlı boş bir div oluşturun modal-wrapper.

Adım 3: dan modal elemanı Kopya clone-modal-wrapperiçin modal-wrapper.

4. adım: modunu değiştirin 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');
});