'show' event doesn't fire in IE9 using Twitter Bootstrap Modal in Rails

Question

I have an issue involving a couple of different frameworks/libs although the main ones being Twitter Bootstrap(js) and Rails.

I have a link in my app that responds with some js:

$(function() {

    var $modal = $('<%= escape_javascript( render 'front_end/bookings/modal', :product => @product, :customer => @customer, :booking => @booking ) %>'),
        $calendar = $modal.find('#calendar'),
        currentProduct = <%= raw(@product.to_json) %>;,
        initBookingCalendar;

    $('body').append($modal);

    $modal.modal('show');

    /* Booking Calendar */
    initBookingCalendar = function(el, productId) {

        el.fullCalendar()

        ...

    };

    $($modal).on('shown', function() {
        if($calendar.is(':empty')) {
            initBookingCalendar($calendar, <%= @product.id %>);
        }
    });
});

The problem is that the 'shown' event doesn't fire in IE9 for some reason!? I reproduced the problem here: http://jsfiddle.net/tvkS6/ and got it working by doing it like this: http://jsfiddle.net/tvkS6/9/ . Problem is I don't know how to implement the solution in my code since I don't really understand what the problem is.

The reason I have to wait with initBookingCalendar until the modal is entirely shown is that jQuery FullCalendar Plugin requires the element to be visible before rendering the calendar.

Any hints are appreciated!

Answer 1

You need to move your attaching of the listener to before your first call of the show() method.

$modal.on('shown', function() {
    if($calendar.is(':empty')) {
        initBookingCalendar($calendar, <%= @product.id %>);
    }
});

$modal.modal('show');

The reason why it might be working in non-IE browsers is because they support CSS transitions, which makes it so that the code that triggers the shown event is asynchronous. Since IE doesn't support it, the show() method is carried out synchronously, and the shown event is triggered before you attach the listener.

---

Update

Here's a demo that verifies my explanation as to why your example works in other browsers. By setting

$.support.transitions = false;

The Modal.show() method will run synchronously on all browsers, and thus, your example will now fail in Chrome, FF, etc..

JSFiddle Demo of what not to do