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:

  1. Eu pressiono o botão.
  2. Modal mostrado com tudo funcionando bem.
  3. Eu pressiono o botão
  4. Modal oculto.
  5. Eu pressiono o botão.
  6. Modal aberto e carregando novamente ajax e funciona bem.

Preciso excluir 4. e 5.:

  1. Eu pressiono o botão.

  2. Modal mostrado com tudo funcionando bem.

  3. Eu pressiono o botão

  4. 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?