jquery - form - El evento ''show'' no se activa en IE9 usando Twitter Bootstrap Modal in Rails

show modal bootstrap

Question

Tengo un problema que involucra un par de frameworks / libs diferentes, aunque los principales son Twitter Bootstrap (js) y Rails.

Tengo un enlace en mi aplicación que responde con algunos 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 %>);
        }
    });
});

El problema es que el evento "mostrado" no se dispara en IE9 por alguna razón? Reproduje el problema aquí: http://jsfiddle.net/tvkS6/ y lo conseguí trabajando de esta manera: http://jsfiddle.net/tvkS6/9/ . El problema es que no sé cómo implementar la solución en mi código ya que realmente no entiendo cuál es el problema.

La razón por la que tengo que esperar con initBookingCalendar hasta que se muestre completamente el modal es que jQuery FullCalendar Plugin requiere que el elemento esté visible antes de mostrar el calendario.

Cualquier sugerencia es apreciada!

Answer 1

Debe mover su atacante del oyente antes de su primera llamada al método show() .

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

$modal.modal(''show'');

La razón por la que podría funcionar en navegadores que no sean IE es porque admiten transiciones CSS, lo que hace que el código que desencadena el evento shown sea ​​asincrónico. Como IE no lo admite, el método show() se lleva a cabo de forma síncrona y el evento shown se desencadena antes de adjuntar el oyente.

Actualizar

Aquí hay una demostración que verifica mi explicación de por qué su ejemplo funciona en otros navegadores. Configurando

$.support.transitions = false;

El método Modal.show() se ejecutará de forma síncrona en todos los navegadores, y por lo tanto, su ejemplo ahora fallará en Chrome, FF, etc.

Demostración JSFiddle de lo que no se debe hacer