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-remote attribute.

Because the content is loaded after jquery validation has run across the dom, validation doesn't occur for the newly loaded elements.

I have a solution where I modify bootstrap.js (the modal class), see below.

  var Modal = function (element, options) {
    this.options = options
    this.$element = $(element)
      .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
    //this.options.remote && this.$element.find('.modal-body').load(this.options.remote)

    this.options.remote && this.$element.find('.modal-body').load(this.options.remote, $.proxy(function () {
        this.$element.trigger('loaded')
    }, this)) //my additions
  }

I trigger a 'loaded' event to the call that loads the external html fragment.

I already have this event wired up and i call the validation on the newly loaded elements.

$('#myModal').on('loaded', function () {
                $.validator.unobtrusive.parse($(this));
            });

My issue is that I had to modify bootstrap.js to achieve this, is there a way I can have this working externally without modifying bootstrap.js? Is there a way to access the modal object on a page and attach the 'loaded' event to it? i'd like to do this in an external script or within a page so i don't need to worry about bootstrap versions.

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

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

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

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