Bootstrap modal al hacer clic en el botón necesita una recarga completa de la ventana modal
Aug 18 2020
Necesito recargar completamente la ventana modal al hacer clic en el botón (abarcar aquí). Ahora mismo, hacer clic es abrir la ventana modal y cerrar la ventana modal.
si uso este código:
$('#youtubeModal').on('hidden.bs.modal', function (event) { $('#youtubeModal').modal('toggle')
})
Solo está reabriendo la ventana modal, pero necesito una recarga completa.
Tengo derecho ahora:
- Presiono el botón.
- Modal mostrado con todo funcionando bien.
- Presiono el botón
- Modal oculto.
- Presiono el botón.
- Modal abre y carga de nuevo ajax y funciona bien.
Necesito eliminar 4. y 5.:
Presiono el botón.
Modal mostrado con todo funcionando bien.
Presiono el botón
Modal reabre y recarga ajax y funciona bien.
<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>
Respuestas
ustmaestro Aug 18 2020 at 18:32
Parece que necesita un disparador personalizado y hacerlo programáticamente porque el disparador de alternancia de datos BS predeterminado tiene otra lógica
<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>
También puedes encontrar más información aquí
¿Cómo pasar parámetros a modal cuando lo llamo programáticamente?