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

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!

Answers


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

Need Your Help

How to define an non-JTA datasource for JPA-Hibernate? org.hibernate.connection.DatasourceConnectionProvider - Could not find datasource:

java hibernate orm jpa jpa-2.0

I am trying to change my web-app's JDBC code to JPA using Hibernate as provider. I am using Eclipse IDE. In that i have defined a MySQL data source. I added it in the persistence.xml.

Can you specify format for XmlSerialization of a datetime?

c# xml serialization

I need to serialize / deserialize a datetime into yyyyMMdd format for an XML file. Is there an attribute / workaround I can use for this?