javascript - bootstrap, modal dialogs, shown.bs.modal event doesn't fire - Stack Overflow

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 ment):

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'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 ment):

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?

• javascript
• jquery
• twitter-bootstrap-3

Share Improve this question Follow edited Dec 3, 2013 at 1:55 Phil 165k2525 gold badges262262 silver badges267267 bronze badges asked Dec 2, 2013 at 23:27 TenekTenek 43711 gold badge77 silver badges1515 bronze badges 6

• 1 Voting to close: Bootstrap changed a lot of things between versions 2 and 3. Please read Migrating from 2.x to 3.0 as well as the new documentation for Modals – Phil Commented Dec 3, 2013 at 1:52
• 3 My question applies to version 3 (I never used version 2, actually). Again, this lag happens only when remote option is used. I guess there is some issue with timing. I will try to inject modal dialogs via JavaScript instead of Attributes. Maybe, I will load modal dialog content by myself. Don't want to give up on bootstrap's modals yet :). – Tenek Commented Dec 3, 2013 at 15:56
• You are using v2 markup. Where's your modal-diag class? – Phil Commented Dec 3, 2013 at 19:56
• Did you mean "modal-dialog" class? Modal dialog content (including DIV with "modal-dialog" class) is loaded from specified url: href="/Banner/SlideEditModal/1/1" (see my original example). I can pull exact HTML a bit later... I'm not sure where I used v2 markup. If you think this could be a problem, let me know and I will try to change problem place. – Tenek Commented Dec 3, 2013 at 20:41
• 1 Oops, yes modal-dialog. Your question is inplete (does not ply with SSCCE guidelines). I would suggest removing the data-toggle trigger attributes and instead, use JS to open the modal only when the content is present – Phil Commented Dec 3, 2013 at 22:32

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

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.
});

For anyone ing here late and wading through lots of related issues, this answer from related post solved the OPs issue exactly for me...