Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – reset href attribute after clicking on modal

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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:

    $(document).on('click', '.modal-link', function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    var modal = $('#exampleModal');
    modal.find('#modalContent').load(url, function() {
       modal.modal('show');
    });
});

  2. 0

    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.

    $(function () {
  // ...rest of your code

  $('#exampleModal').on('hidden.bs.modal', function () {
    $(this).find('#modalContent').empty();
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search