bootstrap, modal dialogs, shown.bs.modal event doesn't fire
javascript, jquery, twitter-bootstrap-3
Solution
I had the exact same Problem. I could fix it with the solution to this StackOverflow question: Bootstrap modal 'loaded' event on remote fragment
Basically you have to open the modal manually and implement the Ajax loading yourself. Something like:
$modal.modal({
'show': true
}).load('/Banner/SlideEditModal/1/1', function (e) {
// this is executed when the content has loaded.
});
Problem
I'm using modal dialog with remote option: ``` <a target="profile-banner" data-target="#edit-slide-dlg" href="/Banner/SlideEditModal/1/1" data-toggle="modal" class="banner-slide-control">Edit</a> ``` Where: ``` <div id="edit-slide-dlg" class="modal fade" tabindex="-1"></div> ``` Also, I'm listening for shown.bs.modal event where I use event.target property: ``` $("body").on("shown.bs.modal", function (event) { // do something with event.target } ``` Some reason this event is not fired when I open dialog for the first time. And it gets fired for the second time only. I tried to browse bootstrap scripts and found this code (see my comment): ``` var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget }) transition ? that.$element.find('.modal-dialog') // wait for modal to slide in .one($.support.transition.end, function () { that.$element.focus().trigger(e) //THIS LINE NEVER EXECUTED AT FIRST DIALOG OPENING }) .emulateTransitionEnd(300) : that.$element.focus().trigger(e) ``` So, I turned off transition as a workaround, It made event be fired for the first time, but, event.target is empty string. For the second time event.target contains appropriate dialog HTML. Is this problem with my code or bootstrap?