Bootstrap modal sur le clic du bouton nécessite un rechargement complet de la fenêtre modale

Question

J'ai besoin de recharger complètement la fenêtre modale en cliquant sur le bouton (span ici). Cliquez maintenant pour ouvrir la fenêtre modale et fermer la fenêtre modale.

si j'utilise ce code:

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

Il s'agit juste de rouvrir la fenêtre modale, mais j'ai besoin d'un rechargement complet.

J'ai droit maintenant:

1. J'appuie sur le bouton.
2. Modal montré avec tout fonctionne bien.
3. J'appuie sur le bouton
4. Modal masqué.
5. J'appuie sur le bouton.
6. Modal ouvert et chargement à nouveau ajax et fonctionne bien.

J'ai besoin de supprimer 4. et 5.:

1. J'appuie sur le bouton.

2. Modal montré avec tout fonctionne bien.

3. J'appuie sur le bouton

4. Modal rouvrir et recharger ajax et fonctionne 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>
   

Answer 1

Il semble que vous ayez besoin d'un déclencheur personnalisé et que vous le faites par programme, car le déclencheur de basculement de données BS par défaut a une autre logique

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

Vous pouvez également trouver plus d'informations ici

Comment passer des paramètres en modal lorsque je l'appelle par programme?