CODEWITHSUNDEEP
jquerycallbacktwitter-bootstrap-3
HTTP
HTTP

Reputation: 1724

Call back function in modal of bootstrap3

Im a little bit confuse about firing a call back function in javascript modal of bootstrap3. In normal jquery.post you can do it like, 

$.post('path', { something: something }, function(data) { 
  console.log(data);
});

But in bootstrap 3 modal I fires the modal through script and I do it like this base on how I understand the explanation in their website.

$('selector').modal('show', function() { 
  //here comes the problem, I have a button in the modal in the html, my code
  //if the button was clicked inside this modal is..

  $('#myButton').on('click', function() { 
     console.log("this is a try");
  });
});

But sad to say if I click the button, nothing is happening, nothing was logged in the console. How do I call a callback function in a modal of bootstrap 3?

Upvotes: 26

Views: 72574

Answers (5)

jofftiquez
jofftiquez

Reputation: 7708

Wrap it with 

$(window).on('load', function() {
    ...modal callback here.
});

Upvotes: 0

rborodinov
rborodinov

Reputation: 141

I think better will be, to use "shown.bs.modal" it is fiered when modal is allready loaded. Bootstrap modal events

$('#myModal').on('shown.bs.modal', function (e) {
    alert('modal is allready shown');
});

Upvotes: 10

mpsq
mpsq

Reputation: 377

@Skelly is right, you can use the show.bs.modal event like this:

$('#myModal').on('show.bs.modal', function (e) {
    alert('modal show');
});

The official documentation says:

This event fires immediately when the show instance method is called.

Please note that this event is fired "quite soon" and you may need to use shown.bs.modal instead.

Documentation about this event:

This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).

This impacts @Keith yeoh's answer and you should avoid timeouts when possible.

Source: Official Bootstrap documentation

Upvotes: 18

Keith Yeoh
Keith Yeoh

Reputation: 730

Just a little to add for the 1st answer, it is because when the callback is triggered the DOM inside the modal is not completely loaded yet, perhaps should do a little hack here to holdback the action after callback for a while. Hope it helps!

$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        // something here
    }, 300);
});

Upvotes: 11

Carol Skelly
Carol Skelly

Reputation: 362360

For Bootstrap 3, the events are now namespaced, so the show event for the modal would be show.bs.modal...

$('#myModal').on('show.bs.modal', function (e) {
    alert('modal show');
});

Demo: http://bootply.com/90952

Upvotes: 33

Related Questions