Callback when we use data-target in bootstrap

Question

I am working with a single page application, There are some buttons which which opens this modal through data-target.

I need to hit an API when this "MODAL" opens up on screen through any of the button clicks. (There are multiple buttons which could open this modal)

One very messy way would be to attach an onclick event to every button. Could anyone suggest me a cleaner way to accomplish this in which I could probably attach some kind of event handler to the modal?

here is the messy solution of my problem

<a data-target="#SomeModal" data-toggle="modal" href="#">
<button class="btn btn-success btn-lg" onclick="function_api_call();">
Click me</button>
</a>

Answer 1

You can listen to the modal show event :

$('#SomeModal').on('show.bs.modal', function (e) {
    // do something...
})

It will be called each time the modal is called, from direct js call and from data attribute

For reference (Bootstrap modal event list) : http://getbootstrap.com/javascript/#modals-events