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?
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.
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With