CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
J.Pip
J.Pip

Reputation: 4613

fire event when losing focus on bootstrap-modal

I have a twitter bootstrap modal which I create with the data-tags so no actual javascript.
When I click outside the modal dialog (so on the grey area) it closes, but I want to make sure the fields that are in it are cleared. I tried it with jQuery like so:

$('#modal-form > .modal-dialog').on('blur', function(){
    Utils.clearFields();
});

But I never come in the anonymous function, am I binding the wrong event? Or am I using the wrong selector (I also tried it with "$('#modal-form')")?

Any help on this is highly appreciated.

Thanks

Upvotes: 1

Views: 4818

Answers (1)

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

Version 2.3.2 and below

The event handler needs to be placed on hide for version Bootstrap version 2.3.2 and lower

$('#modal-form > .modal-dialog').on('hide', function(){
    Utils.clearFields();
});

If #modal-form has the modal data attributes applied the selector needs modified too:

$('#modal-form').on('hide', function(){
    Utils.clearFields();
});

Documentation http://getbootstrap.com/2.3.2/javascript.html#modals

Version 3.0

The event handler needs to be placed on hide.bs.modal for version Bootstrap version 3.0:

$("#modal-form").on("hide.bs.modal", function(){
   alert("hiding");
});

Version 3.0 Fiddle: http://jsfiddle.net/9u5MQ/

Version 3.0 Documentation: http://getbootstrap.com/javascript/#modals

Upvotes: 6

Related Questions