Bootstrap modal 'loaded' event on remote fragment

Question

I\'m currently using Twitter Bootstrap modal component and i have an issue where I use jquery validation plugin on input fields in the content I load remotely using the data-rem

Answer 1

According to both these issues:

https://github.com/twbs/bootstrap/issues/5169

https://github.com/twbs/bootstrap/pull/6846

..as of now the Bootstrap developers are digging their heels in and refusing to add a loaded event into Bootstrap.

So instead they recommend you avoid using the data-remote markup and load the data yourself into the modal:

$('#myModal').modal(your_options).find('.modal-body').load('request_url', function () {
  // do cool stuff here all day… no need to change bootstrap
}')

Answer 2

Boostrap 3.3's modal events has the loaded.bs.modal event.

however in Bootstrap 4's modal events dose not have this event. I would recommend using the shown.bs.modal event as it fires after the CSS has been rendered

Answer 3

The 'loaded.bs.modal' event doesn't work for me, so I have tried the 'shown.bs.modal' event and it's works fine :

$('#myModal').on('shown.bs.modal', function () {
   // do cool stuff here...
});

This event is captured after the modal is shown.

I hope this will help someone :)

Answer 4

I had a rather interesting catch, In my case, on localhost, the event loaded.bs.modal was firing before the event shown.bs.modal since on local host the act of fetching the data from the "remote" url(which was local btw), was happening instanteneously even before the bootstrap could finish its transition and trigger the shown.bs.modal event.

But on a webserver the events were firing in the perceived order.

First the shown.bs.modal was being triggered and then owing to the pragmatic latency of the remote url, the event loaded.bs.modal was being triggered.

What I wanted is to grab an event whichever happened the last.

So to solve it I came up with my own implementation as below. YMMV, Now there are a lot of assumptions here, so take the below code as just a POC and with a grain of salt rather than a full fledged code.

jQuery('#myModal').on('shown.bs.modal', function () {
    if (jQuery(this).find('.resetFlag').length) {
        // Do something ONLY IF "loaded.bs.modal" hasn't yet been triggered
    }
});
jQuery('#myModal').on('loaded.bs.modal', function (e) {

    if (jQuery(this).find('.resetFlag').length) {
        // Do something ONLY IF "shown.bs.modal" hasn't yet been triggered
        } else  {
        // Do something ONLY IF "shown.bs.modal" hasn already been triggered
        }
});
jQuery('#myModal').on('hidden.bs.modal', function () {
    jQuery('#myModal .modal-content').html('<div class="resetFlag" style="display:none;"></div>');
    showModalLoader();
});

Answer 5

Just an update here:

Bootstrap has added a loaded event.

http://getbootstrap.com/javascript/#modals

capture the 'loaded.bs.modal' event on the modal

$('#myModal').on('loaded.bs.modal', function (e) {
  // do cool stuff here all day… no need to change bootstrap
})