Modal bootstrap pada klik tombol membutuhkan pemuatan ulang jendela modal

Question

Saya perlu memuat ulang jendela modal penuh dengan mengklik tombol (rentangkan di sini) Sekarang mengklik membuka jendela modal dan menutup jendela modal.

jika saya menggunakan kode ini:

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

Ini hanya membuka kembali jendela modal, tetapi saya perlu memuat ulang penuh.

Saya memiliki ketelitian sekarang:

1. Saya menekan tombol.
2. Modal ditampilkan dengan semua berfungsi dengan baik.
3. Saya menekan tombol
4. Modal disembunyikan.
5. Saya menekan tombol.
6. Modal terbuka dan memuat lagi ajax dan berfungsi dengan baik.

Saya perlu menghapus 4. dan 5.:

1. Saya menekan tombol.

2. Modal ditampilkan dengan semua berfungsi dengan baik.

3. Saya menekan tombol

4. Modal membuka kembali dan memuat ulang ajax dan berfungsi dengan baik.

    <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

Tampaknya Anda memerlukan pemicu khusus dan melakukannya secara terprogram karena pemicu toggle data BS default memiliki logika lain

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

Juga info lebih lanjut dapat Anda temukan di sini

Bagaimana cara melewatkan parameter ke modal ketika saya memanggilnya secara terprogram?