0

I have two modals on a page. I only want one to refresh the parent page once closed. However, even if I add the code to do so both modals refresh the page after closing. Any idea why?

<script>
    $(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal');
    });
</script>

<script>
    $(document.body).on('hidden.bs.modal', function () {
    $('#myModal2').removeData('bs.modal');
    location.reload();
    });
</script>

Modal 1 call:

<a data-toggle="modal" data-target="#myModal" href="modal_target.cfm?M=#MLink#" class="btn btn-#bg_color#">#CP#</a>

Modal 2 call:

<a data-toggle="modal" data-target="#myModal2" href="modal_AmendCP.cfm?M=#MLink#" title="view details" class="btn btn-primary">#Measure#</a>

Thanks for any help!

Neil Deeley
  • 57
  • 1
  • 9
  • Possible duplicate of [Bind a function to Twitter Bootstrap Modal Close](https://stackoverflow.com/questions/8363802/bind-a-function-to-twitter-bootstrap-modal-close) – Shivaji Varma May 10 '18 at 08:39

2 Answers2

2

Both of your functions are being fired on the same event of modal closing on $(document.body).

You should change it to the be triggered on modal objects only:

<script>
    $('#myModal').on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal');
    });
</script>

<script>
    $('#myModal2').on('hidden.bs.modal', function () {
    $('#myModal2').removeData('bs.modal');
    location.reload();
    });
</script>

From the Bootstrap Documentation:

hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

Yan
  • 433
  • 2
  • 16
0

you should select exact modal to add Event Listener. if selector is "document.body", event will fire for both. in your code: function called for 'hidden.bs.modal' is only

function () {
$('#myModal2').removeData('bs.modal');
location.reload();
}

it replace 

function () {
$('#myModal').removeData('bs.modal');
}

because it is declared later.

Sess Sama
  • 1
  • 2