14

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?

Phil
  • 157,677
  • 23
  • 242
  • 245
Tenek
  • 437
  • 1
  • 6
  • 15
  • 1
    Voting to close: Bootstrap changed a lot of things between versions 2 and 3. Please read [Migrating from 2.x to 3.0](http://getbootstrap.com/getting-started/#migration-notes) as well as the new documentation for [Modals](http://getbootstrap.com/javascript/#modals) – Phil Dec 03 '13 at 01: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 Dec 03 '13 at 15:56
  • You are using v2 markup. Where's your `modal-diag` class? – Phil Dec 03 '13 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 Dec 03 '13 at 20:41
  • 1
    Oops, yes `modal-dialog`. Your question is incomplete (does not comply with [SSCCE](http://sscce.org/) 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 Dec 03 '13 at 22:32
  • 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? – Anton Jan 16 '14 at 15:32

2 Answers2

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.
});
Community
  • 1
  • 1
Anton
  • 936
  • 1
  • 8
  • 27
  • 8
    what about the event that fires when this modal closes? – A.J. Mar 03 '14 at 11:48
  • Regarding the event look here for a better answer: http://stackoverflow.com/questions/19279629/bootstrap-jquery-show-bs-modal-event-wont-fire – Karussell Mar 14 '16 at 17:03
  • Hello, Anton. I believe this answer will help me with my problem: https://stackoverflow.com/questions/47609994/jquery-executes-properly-after-second-call 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. – Luis Alberto Delgado de la Flo Dec 02 '17 at 18:47
0

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

enter image description here

Adam Hughes
  • 14,601
  • 12
  • 83
  • 122