Модальное окно начальной загрузки при нажатии кнопки требует полной перезагрузки модального окна

Question

Мне нужно полностью перезагрузить модальное окно при нажатии кнопки (здесь). Щелчок сейчас открывает модальное окно и закрывает модальное окно.

если я использую этот код:

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

Это просто повторное открытие модального окна, но мне нужна полная перезагрузка.

Теперь у меня есть право:

1. Я нажимаю кнопку.
2. Показано модальное окно, все работает нормально.
3. Я нажимаю кнопку
4. Модальный скрытый.
5. Я нажимаю кнопку.
6. Модальное открытие и загрузка снова ajax и работают нормально.

Мне нужно удалить 4. и 5.:

1. Я нажимаю кнопку.

2. Показано модальное окно, все работает нормально.

3. Я нажимаю кнопку

4. Модальное повторное открытие и перезагрузка ajax и работа нормально.

    <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

Похоже, вам нужен настраиваемый триггер, и вы делаете это программно, потому что триггер переключения данных BS по умолчанию имеет другую логику

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

Также больше информации вы можете найти здесь

Как передать параметры в модальное окно, когда я вызываю его программно?