I have several buttons in gridview to call a bootstrap modal (the same modal but different contents):
return Html::a('<i class="fa"></i> ', $key, [
'title' => 'Lihat rincian agenda ini',
'data-bs-toggle' => 'modal',
'data-bs-target' => '#exampleModal',
'class' => 'modal-link',
]);
return Html::a('<i class="fab text-danger fa-readme"></i> ', ['laporan/' . $model->id_agenda], [
'title' => 'Laporan agenda belum disetujui',
'data-bs-toggle' => 'modal',
'data-bs-target' => '#exampleModal',
'class' => 'modal-link',
]);
return Html::a('<i class="fab text-success fa-readme"></i> ', ['laporan/' . $model->id_agenda], [
'title' => 'Lihat laporan agenda ini',
'data-bs-toggle' => 'modal',
'data-bs-target' => '#exampleModal',
'class' => 'modal-link',
]);
This the JS to call the modal:
$(function () {
$('.modal-link').on('click', function (e) {
e.preventDefault();
$('#exampleModal').modal('show').find('#modalContent').load($(this).attr('href'));
});
});
The first click on any button gives the correct contents (href). But the second click and next ones give content from the first click. How do I reset the contents so each click gives accurate href content?
Update
This is the list of JS library I use in my yii2 app:
'https://code.jquery.com/jquery-3.7.1.min.js',
'https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js',
'library/restaurantly/assets/vendor/aos/aos.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js',
'library/restaurantly/assets/vendor/glightbox/js/glightbox.min.js',
'library/restaurantly/assets/vendor/swiper/swiper-bundle.min.js',
'library/restaurantly/assets/js/main.js',
'https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.js',
I tried removing the list one by one but that only made the page disappear completely.
2
Answers
Thank you to mandy8055. His answer does not work on the whole app but it helps me find another way out of the problem. Here's the updated code that works:
The issue is probably that the content is being cached after the first load. For this scenario you will have to clear the modal content when the modal is hidden. Below is a sample code that binds an event handler to the
hidden.bs.modal
event.