Il bootstrap modale al clic del pulsante richiede il ricaricamento completo della finestra modale

Aug 18 2020

Devo ricaricare completamente la finestra modale facendo clic sul pulsante (span qui) In questo momento facendo clic si apre la finestra modale e si chiude la finestra modale.

se utilizzo questo codice:

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

Sta solo riaprendo la finestra modale, ma ho bisogno di ricaricare completamente.

Adesso ho diritto:

  1. Premo il pulsante.
  2. Modale mostrato con tutto funzionante bene.
  3. Premo il pulsante
  4. Modale nascosto.
  5. Premo il pulsante.
  6. Modal aperto e caricamento di nuovo ajax e funziona bene.

Devo eliminare 4. e 5.:

  1. Premo il pulsante.

  2. Modale mostrato con tutto funzionante bene.

  3. Premo il pulsante

  4. Modal riapre e ricaricare ajax e funziona bene.

     <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>
    

Risposte

ustmaestro Aug 18 2020 at 18:32

Sembra che tu abbia bisogno di un trigger personalizzato e fallo in modo programmatico perché il trigger di commutazione dati BS predefinito ha un'altra logica

<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>

Puoi trovare anche maggiori informazioni qui

Come passare i parametri a modal quando lo chiamo a livello di codice?