Question

119

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

rated 0 times [ 121] [ 2] / answers: 1 / hits: 19488 / 11 Years ago, mon, december 2, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lucianom

Add To Favorites

Follow

Total Points: 601

Total Questions: 98

Total Answers: 109

Location: Kenya

Member since Fri, Dec 23, 2022

1 Year ago

lucianom questions

1 Map and sort data by date

Tue, Feb 22, 22, 00:00, 2 Years ago

1 Typescript axios typings

Wed, May 5, 21, 00:00, 3 Years ago

1 Ho can I add two values in Bootstrap range slider

Sun, Jan 24, 21, 00:00, 3 Years ago

1 Discord.js, async and await

Sat, Aug 15, 20, 00:00, 4 Years ago

1 How do I call a JS Function in another file?

Mon, Jun 22, 20, 00:00, 4 Years ago

View All

answered 11 Years ago jackelyn · Accepted Answer

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.

});