Organizational Research By

Surprising Reserch Topic

bind a function to twitter bootstrap modal close

bind a function to twitter bootstrap modal close  using -'jquery,modal-dialog,twitter-bootstrap'

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.

asked Sep 22, 2015 by android_master
0 votes

Related Hot Questions

6 Answers

0 votes

For Bootstrap v3.0, you just need to bind an event like this:

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

See the Modal Usage section of the docs here:

See this JsFiddle for a working example:

answered Sep 22, 2015 by gauravsinghal83
0 votes

Bootstrap 3

$('#myModal').on('', function () {
    // do something…
}) -> Events

Bootstrap 2.3.2

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

answered Sep 22, 2015 by vickeykumar66
0 votes

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


$(document).on('', '#Control_id', function (event) {
// code to run on closing
answered Sep 22, 2015 by akasati02
0 votes

Bootstrap provide events that you can hook into modal, like if you want to fire a event when the modal has finished being hidden from the user you can use event like this

    /* event example */
    $('#myModal').on('', function () {
          window.alert('hidden event fired!');

Check a working fiddle here read more about modal methods and events here in Documentation

answered Sep 22, 2015 by suyesh.lokhande
0 votes

jQuery's bind and on where not firing when the modal was closing. I had more success with live:

$('#my-modal').live('hidden', function(e) {
    // do something
answered Sep 22, 2015 by tseetha
0 votes

Starting Bootstrap 3 there are 2 instances in which you can add fire up events, being:

  1. When modal "hide" event starts

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

  1. When modal "hide" event finished

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


answered Sep 22, 2015 by tejas lakhani