Store jQuery Id Selector in a variable

Question

Store jQuery Id Selector in a variable

Navigation

#1 by (1 votes)
#2 by (0 votes)

3

Why in the first example, when I store a JQuery Selector Id in a variable, the open () function does nothing? In example 2 the modal dialog box is displayed correctly ...

Example 1)

var modalBox = (function(){

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

    return {

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

})();

Example 2)

var modalBox = (function(){

    return {

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

})();

call open () function:

onclick="modalBox.open();"

modal box code:

<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>

javascript jquery

asked by Fabio Morgetta 17.05.2016 в 14:20

source

2 answers

Views and render () in Django # 1064 MySQL Error

score 1 · Answer 1

Because in the first case you declare the variable $ modalBoxDialog before the document finishes loading, so the jQuery selector does not return any element.

In the second case the search for the element is done when executing the open method, the DOM is already loaded and locates the element to be displayed.

If you put the declaration of the variable inside the function it will work without problems:

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

score 0 · Answer 2

The problem is really where you put your code and the concept of closure ( closure ) .

In a closing the variables that are assigned in that environment, maintain their value when they are returned, so when you make var $modalBoxDialog = $('#modal-box-dialog'); , the value of $modalBoxDialog will be the value that you had at that moment and not the one that has when the .open() is executed.

So, in example 1:

var modalBox = (function(){

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

    return {

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

})();

You are assigning the value of $modalBoxDialog when the function is created, therefore if when calling that code there is still no element with the id modal-box-dialog , that will remain that way. For example, in this JSFiddle , I run your code in head , before the modal was created and that's why it is not displayed (if you open the console you will see that I do a console.log($modalBoxDialog.length) that returns 0).

A possible solution to this is to create the code AFTER the element has been defined with id modal-box-dialog . In this way $('#modal-box-dialog') will return something and yes the modal will be executed without problems. You can see it in this JSFiddle where the only thing I've changed from the previous example is that the code runs at the end of body , when the modal already exists (and then you will see that the console.log($modalBoxDialog.length) returns 1).

Instead, example 2:

var modalBox = (function(){

    return {

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

})();

works without problems because no variable is assigned but a new selection is always made, and so the result / most recent elements will always be obtained when using the selector for the modal.