Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap, modal dialogs, shown.bs.modal event doesn't fire

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?

like image 877
Tenek Avatar asked Dec 02 '13 23:12

Tenek


1 Answers

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.
});
like image 159
Anton Avatar answered Sep 23 '22 23:09

Anton