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

Question

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?

Stochastic

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 – Hanlon

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 :). – Stochastic

You are using v2 markup. Where's your modal-diag class? – Hanlon

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. – Stochastic

Oops, yes modal-dialog. Your question is incomplete (does not comply 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 – Hanlon

Hello @user2827454! I have the exact same problem. When using the "remote" the shown.bs.modal event is not fired the first time the modal is opened. How did you solve this problem? – Traveled

Answer 1

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

Traveled

what about the event that fires when this modal closes? – Bilabiate

Regarding the event look here for a better answer: #19280129 – Slemmer

Hello, Anton. I believe this answer will help me with my problem: #47610494 I have a doubt about how dinamically send the href to the jQuery: load('/Banner/SlideEditModal/1/1' Since there are several buttons calling for the modal in my view. Will investigate but wanted to thank you for this clue. – Kelleher

Answer 2

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

Tiepolo