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

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('
');
    showModalLoader();
});