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
9 views



Related Hot Questions

6 Answers

0 votes

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

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

See the Modal Usage section of the docs here:

http://getbootstrap.com/javascript/#modals-usage

See this JsFiddle for a working example:

http://jsfiddle.net/kRLQ4/439/

answered Sep 22, 2015 by gauravsinghal83
0 votes

Bootstrap 3

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

http://getbootstrap.com/javascript/#modals -> Events

Bootstrap 2.3.2

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

http://getbootstrap.com/2.3.2/javascript.html#modals -> 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:

Use:

$(document).on('hidden.bs.modal', '#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 hidden.bs.modal event like this

    /* hidden.bs.modal event example */
    $('#myModal').on('hidden.bs.modal', 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('hide.bs.modal', function () { console.log('Fired at start of hide event!'); });

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

answered Sep 22, 2015 by tejas lakhani

...