Bind a function to Twitter Bootstrap Modal Close

I am using the Twitter Bootstrap lib on a new project and I want for part of the page to refresh and retrieve the latest json data on modal close. I dont see this anywhere in the documentation can someone point it out to me or suggest a solution.

Two problems with using the documented methods

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

I attach a "hide" class to the modal already so it does not display on page load so that would load twice

even if I remove the hide class and set the element id to display:none and add console.log("THE MODAL CLOSED"); to the function above when I hit close nothing happens.

Solution 1:

Bootstrap 3 & 4

$('#myModal').on('hidden.bs.modal', function () {
    // do something…
});

Bootstrap 3: getbootstrap.com/javascript/#modals-events

Bootstrap 4: getbootstrap.com/docs/4.1/components/modal/#events

Bootstrap 2.3.2

$('#myModal').on('hidden', function () {
    // do something…
});

See getbootstrap.com/2.3.2/javascript.html#modals → Events

Solution 2:

Bootstrap 4

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

See this JSFiddle for a working example:

https://jsfiddle.net/6n7bg2c9/

See the Modal Events section of the docs here:

https://getbootstrap.com/docs/4.3/components/modal/#events

Solution 3:

Starting Bootstrap 3 (edit: still the same in Bootstrap 4) there are 2 instances in which you can fire up events, being:

1. When modal "hide" event starts

$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});  

2. When modal "hide" event finished

$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

Ref: http://getbootstrap.com/javascript/#js-events

Solution 4:

In stead of "live" you need to use "on" event, but assign it to the document object:

Use:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});

Solution 5:

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