Bootstrap 4.1.3 modal body retains jquery returned

Question

I have a form that submits data via jquery which is then shown via bootstrap modal.

However, the problem is that, if I quickly try to give new values to the form then the modal body sometimes doesn't show freshly calculated values but shows the old cached values.

How can I destroy the modal cache data in bootstrap 4 ? I have tried various bootstrap3 tips but it just wouldn't work and I still see old cached data intermittantly.

Here is what I tried.

  $('#modalForm').on('hidden.bs.modal', function () {
      $('#modal_content').empty();
      $('#modalForm').modal('dispose');
      $(this).find('form').trigger('reset');
      $(this).find('form')[0].reset();
      //$('.modal').remove(); // this prevents future modals
  });

Any help would be greatly appreciated.

Answer 1

It might be a binding issue, you are binding hidden.bs.modal on the #modalForm so unless you don't unbind it at some point, the same code will always execute with old values.

Try unbinding it by putting this code $('#modalForm').off('hidden.bs.modal') right before $('#modalForm').on('hidden.bs.modal', function () {[...] and if it doesn't work you might want to bind it only once using the $('#modalForm').one('hidden.bs.modal') instead.