Modal de bootstrap no clique do botão precisa recarregar totalmente a janela modal
Aug 18 2020
Preciso recarregar totalmente a janela modal clicando no botão (vá até aqui) Clicar agora é abrir a janela modal e fechar a janela modal.
se eu usar este código:
$('#youtubeModal').on('hidden.bs.modal', function (event) { $('#youtubeModal').modal('toggle')
})
Estou apenas reabrindo a janela modal, mas preciso recarregar totalmente.
Eu tenho direito agora:
- Eu pressiono o botão.
- Modal mostrado com tudo funcionando bem.
- Eu pressiono o botão
- Modal oculto.
- Eu pressiono o botão.
- Modal aberto e carregando novamente ajax e funciona bem.
Preciso excluir 4. e 5.:
Eu pressiono o botão.
Modal mostrado com tudo funcionando bem.
Eu pressiono o botão
O modal reabre e recarregue ajax e funcione bem.
<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>
Respostas
ustmaestro Aug 18 2020 at 18:32
Parece que você precisa de um gatilho personalizado e faz isso de forma programática, porque o gatilho de alternância de dados BS padrão tem outra 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>
Também mais informações você pode encontrar aqui
Como passar parâmetros para modal quando eu o chamo de maneira programática?
O que significa um erro “Não é possível encontrar o símbolo” ou “Não é possível resolver o símbolo”?
George Harrison ficou chateado por suas letras de 'Hurdy Gurdy Man' de Donovan não terem sido usadas