CODEWITHSUNDEEP
javascripttwitter-bootstrapmodal-dialog
Neil Deeley
Neil Deeley

Reputation: 57

Reload page after a particular modal is closed

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!

Upvotes: 0

Views: 1725

Answers (2)

Sess Sama
Sess Sama

Reputation: 1

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.

Upvotes: 0

Yan
Yan

Reputation: 433

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

Upvotes: 2

Related Questions