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:

  1. Presiono el botón.
  2. Modal mostrado con todo funcionando bien.
  3. Presiono el botón
  4. Modal oculto.
  5. Presiono el botón.
  6. Modal abre y carga de nuevo ajax y funciona bien.

Necesito eliminar 4. y 5.:

  1. Presiono el botón.

  2. Modal mostrado con todo funcionando bien.

  3. Presiono el botón

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