Düğme tıklamasındaki önyükleme modeli, kalıcı pencerenin tam olarak yeniden yüklenmesini gerektiriyor

Aug 18 2020

Düğmeye tıklayarak mod penceresini tam olarak yeniden yüklemem gerekiyor (buraya yayılın) Şimdi tıklamak, kalıcı pencereyi açmak ve kalıcı pencereyi kapatmaktır.

bu kodu kullanırsam:

$('#youtubeModal').on('hidden.bs.modal', function (event) { $('#youtubeModal').modal('toggle')
})

Kalıcı pencere yeniden açılıyor, ancak tam yüklemeye ihtiyacım var.

Şu anda hakkım var:

  1. Düğmeye basıyorum.
  2. Modal, hepsi iyi çalışıyor olarak gösterilmiştir.
  3. Düğmeye basıyorum
  4. Modal gizlendi.
  5. Düğmeye basıyorum.
  6. Modal açın ve tekrar ajax yükleniyor ve iyi çalışıyor.

4. ve 5. silmem gerekiyor :

  1. Düğmeye basıyorum.

  2. Modal, hepsi iyi çalışıyor olarak gösterilmiştir.

  3. Düğmeye basıyorum

  4. Modal yeniden açın ve ajax'ı yeniden yükleyin ve iyi çalışıyor.

     <div class="modal fade" id="youtubeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-body">
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                 </div>
             </div>
         </div>
     </div>
     <script>
         $('#youtubeModal').on('show.bs.modal', function (event) { let button = $(event.relatedTarget) // Button that triggered the modal
             let youtubeUrl = button.data('url') // Extract info from data-* attributes
    
             $.ajax({ url: '<?= \yii\helpers\Url::toRoute(['youtube/index'])?>', type: 'post', data: {youtubeUrl: youtubeUrl}, success(response) { // Add response in Modal body $('.modal-body').html(response);
                     //$('#exampleModal').html(response); // Display Modal //$('#exampleModal').modal('show');
                 }
             });
         });
     </script>
    

Yanıtlar

ustmaestro Aug 18 2020 at 18:32

Görünüşe göre özel bir tetikleyiciye ihtiyacınız var ve bunu programlı olarak yapıyor çünkü varsayılan BS veri geçiş tetikleyicisinin başka bir mantığı var

<span id="play-button" class="fa fa-play-circle play-button" data-url="watch?v=ik7ysDGWbcw" onclick="showYoutubeModal(this)">click me</span>


<div class="modal fade" id="youtubeModal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
        </div>
        <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
    </div>
</div>
<script>
var youtubeModal = $('#youtubeModal').modal({'show': false}); youtubeModal.on('show.bs.modal', function (event) { let button = $(event.relatedTarget);
    let youtubeUrl = button.data('url');
    
    $.ajax({ url: '<?= \yii\helpers\Url::toRoute(['youtube/index'])?>', type: 'post', data: {youtubeUrl: youtubeUrl}, success(response) { // Add response in Modal body $('.modal-body').html(response);
        //$('#exampleModal').html(response); // Display Modal //$('#exampleModal').modal('show');
        }
    });
});

function showYoutubeModal(trigger) {
    // here you can call modal function programmatically
    // depending on your needs
    youtubeModal.modal('show', $(trigger));
}
</script>

Ayrıca burada daha fazla bilgi bulabilirsiniz

Parametreleri programlı olarak çağırdığımda modal'a nasıl aktarırım?