4

¿Por qué en el primer ejemplo, cuando almaceno un Id Selector JQuery en una variable, la funcion open() no hace nada? En el ejemplo 2 el dialog box modal se visualiza correctamente...

Ejemplo 1)

var modalBox = (function(){

    var $modalBoxDialog = $('#modal-box-dialog');

    return {

        open: function() {
            $modalBoxDialog.modal('show');
        }
    };

})();

Ejemplo 2)

var modalBox = (function(){

    return {

        open: function() {
            $('#modal-box-dialog').modal('show');
        }
    };

})();

llamada a la funcion open():

onclick="modalBox.open();"

codigo modal box:

<div class="modal fade" id="modal-box-dialog" role="dialog">
    <div class="modal-box">
        <div class="modal-box-body">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="modal-box-title">¿Olvidaste tu clave o la tienes bloqueada?</h4>
            </div>

            <div class="modal-body" id="modal-box-body">
                <dl>
                    <dt>Solicita una nueva clave entrando en:</dt>
                    <dd>- Intranet Privada</dd>
                    <dd>- Procesos</dd>
                    <dd>- Aplicaciones y gestión</dd>
                    <dd>- Tecnologia</dd>
                    <dd>- Buzón de seguridad informática</dd>
                    <dd>- Petición genérica</dd>
                    <dt>Especificando que es una clave nueva para un usuario OPEN.</dt>
                </dl>
            </div>

            <div class="modal-footer">
                <div class="row">

                    <div class="col-xs-3 pull-right">
                        <button type="button" class="btn btn-danger btn-block" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

2 respuestas 2

2

Porque en el primer caso declaras la variable $modalBoxDialog antes de que acabe de cargarse el documento por lo que el selector jQuery no devuelve ningún elemento.

En el segundo caso la búsqueda del elemento la realizas al ejecutar el método open, el DOM ya está cargado y localiza el elemento a mostrar.

Si metes la declaración de la variable dentro de la función te funcionará sin problemas:

var modalBox = (function(){
    return {
        open: function() {
            var $modalBoxDialog = $('#modal-box-dialog');
            modalBoxDialog.modal('show');
        }
    };
})();
1

El problema está realmente en dónde colocas tu código y en el concepto de clausura (closure).

En una clausura las variables que se asignan en ese entorno, mantienen su valor cuando son devueltas, por lo que cuando haces var $modalBoxDialog = $('#modal-box-dialog');, el valor de $modalBoxDialog será el valor que tuviera en ese momento y no el que tenga cuando se ejecute el .open().

Así, en el ejemplo 1:

var modalBox = (function(){

    var $modalBoxDialog = $('#modal-box-dialog');

    return {

        open: function() {
            $modalBoxDialog.modal('show');
        }
    };

})();

Estás asignando el valor de $modalBoxDialog cuando se crea la función, por lo tanto si al llamar a ese código aún no existe ningún elemento con el id modal-box-dialog, eso se mantendrá así. Por ejemplo, en este JSFiddle, ejecuto tu código en el head, antes de que se haya creado el modal y por eso no se muestra (si abres la consola verás que hago un console.log($modalBoxDialog.length) que devuelve 0).

Una posible solución a esto es crear el código DESPUÉS de que se haya definido el elemento con id modal-box-dialog. De este modo $('#modal-box-dialog') sí devolverá algo y sí se ejecutará el modal sin problemas. Puedes verlo en este JSFiddle donde lo único que he cambiado con respecto al ejemplo anterior es que el código se ejecuta al final del body, cuando el modal ya existe (y entonces verás que el console.log($modalBoxDialog.length) devuelve 1).

En cambio el ejemplo 2:

var modalBox = (function(){

    return {

        open: function() {
            $('#modal-box-dialog').modal('show');
        }
    };

})();

funciona sin problemas porque no se asigna ninguna variable sino que siempre se realiza una nueva selección, y así siempre se obtendrá el resultado/elementos más recientes al usar el selector para el modal.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.