javascript aliasing when jQuery .val() is called. Why?

Question

I want to backup a textbox value in order to allow table filtering. When user press backspace and leave the textbox empty I want to put the previous value I backed up previously:

vbackup stores the initial textbox value, this is "hello" in the jsfiddle.

$('#btn').click(function () {
    $('#mydiv').slideToggle('fast', function () {
        // I SAVE THE TEXTBOX VALUE SO THAT I CAN
        // GET IT BACK AFTERWARDS
        var vbackup = $('#txtbox').val();
        alert(vbackup);
        if ($(this).is(":visible")) {
            // NO MATTERS...
        }
        else {
            // IF TEXTBOX VALUE IS EMPTY I GET THE PREVIOUS
            // VALUE BACK
            if ($('#txtbox').val() == '') {
                // VBACKUP IS EMPTY !!
                alert(vbackup );
                $('#txtbox').val(vbackup );
            }
        }
    });

    return false;
});

I can't understand why my vbackup variable matches with the textbox actual value since I backuped up earlier.

http://jsfiddle.net/QFQ5k/16/

Procedure:

Press the button once
empty the textbox
Press the button again. Now the "hello" word should be get back from the variable to the textbox. The alert tells that the value in my variable has been overriden.

You are overwriting vbackup (local variable!!) with each call to .slideToggle(). You should make vbackup global and only update it if textbox value is not empty — devnull69, Nov 15 '12 at 12:00
As said by @devull69: put your 'var vbackup' declaration outside the scope of your functions — LittleSweetSeas, Nov 15 '12 at 12:03

score 1 · Accepted Answer · answered Nov 15 '12 at 12:04

See updated http://jsfiddle.net/QFQ5k/21/

$('#mydiv').hide();
var vbackup = $('#txtbox').val();
$('#btn').click(function () {
        $('#mydiv').slideToggle('fast', function () {

            alert(vbackup);
            if ($(this).is(":visible")) {

            }
            else {
                if ($('#txtbox').val() == '') {
                    // In this alert vbackup
                    // is empty !!
                     $('#txtbox').val(vbackup );

                }
                else 
                    vbackup = $('#txtbox').val();
            }
        });

        return false;
    });

score 0 · Answer 2 · answered Nov 15 '12 at 12:08

0

Something like this (storing the value in property of html node) may also be ok. Plus it doesn't make use of global variables (yay).

// this is equal to #mydiv
this.vbackup = $("#txtbox").val()

Checkout the demo here: http://jsfiddle.net/QFQ5k/25/

answered Nov 15 '12 at 12:08

WTK

16,583
6
35
45

Don't save custom variables on DOM notes. Use `jQuery.fn.data` instead or another simular solution. – Andreas Louv Nov 15 '12 at 12:31
@NULL Simple question: why? jQuery.data is slow and an overkill for such simple task. Plus what it really does is it actually stores data in (slightly more complicated, but still) properties of DOM nodes. So again: why? – WTK Nov 15 '12 at 13:45
@WTK It's a longer answer you can start op reading here: http://stackoverflow.com/questions/9242009/storing-custom-data-in-dom-elements – Andreas Louv Nov 15 '12 at 14:25
@NULL I'm aware of possible memory leaks, however some time ago I digged deeper into the subject and leaks are always connected to storing complex objects in DOM nodes. You're on a safe side when sticking to simple data types like string (in this case) or booleans. Again - check the jQuery source for further reading on how `jQuery.data()` works. – WTK Nov 15 '12 at 17:28

score 0 · Answer 3 · answered Nov 15 '12 at 12:34

$("#mydiv").hide();

$('#btn').click(function () {
    $('#mydiv').slideToggle('fast', function () {
        var value = $('#txtbox').val() || $(this).data("value");

        if ( !$(this).is(":visible") && !$('#txtbox').val() ) {
            $('#txtbox').val( value );
        }

        $(this).data("value", value);
    });

    return false;
});

http://jsfiddle.net/QFQ5k/26/

javascript aliasing when jQuery .val() is called. Why?

3 Answers3