Jquery and global variable scope issue between functions

Question

I have the following code:

$(document).ready(function () {

            var english = "";
            var spanish = "";

            $.get("./gamelist-english.txt",function(data){
                english = data;
                });

            $.get("./gamelist-spanish.txt",function(data){
                spanish = data;
                });

        $('#compare').mergely({
            cmsettings: { readOnly: true, lineNumbers: true },
            lhs: function(setValue) {
                setValue(english);
            },
            rhs: function(setValue) {
                setValue(spanish);
            }
        });

    });

(by the way, I'm using mergely library here, but I don't think this matters)

The problem I have is that both variables, "spanish" and "english", are not global, so $('#compare').mergely can't get their values (it says they're both empty, but that's not true). How can I fix this? I thought that by declaring any variables outside of any function they are automatically made global, but apparently that's not working, or I'm a bit lost.

Thank you very much.

They don't need to be global. The scope for them is fine. (You are declaring them inside the anonymous function you pass to `ready`, not as globals). — Quentin, Aug 24 '15 at 13:30
^^ What @Quentin said. Moreover, not making them globals is a Good Thing™. :-) — T.J. Crowder, Aug 24 '15 at 13:31
@Quentin If I write "console.log(english)" inside the GET function, I can get the value, however, if I do the same thing inside .mergely(), console.log does not print anything :S If the scope is alright, what's failling? (T. J. Crowder answered) — Arturo, Aug 24 '15 at 13:34

score 2 · Accepted Answer · answered Aug 24 '15 at 13:34

The fact that they're not globals is not the problem. The scope you have them in is fine.

The problem is that you're calling mergely before you have values in those variables, because ajax is asynchronous. Instead, wait for the calls to complete:

$(document).ready(function () {
    var english = "";
    var spanish = "";

    $.when(
        $.get("./gamelist-english.txt",function(data){
            english = data;
        }),
        $.get("./gamelist-spanish.txt",function(data){
            spanish = data;
        })
    ).then(function() {
        $('#compare').mergely({
            cmsettings: { readOnly: true, lineNumbers: true },
            lhs: function(setValue) {
                setValue(english);
            },
            rhs: function(setValue) {
                setValue(spanish);
            }
        });
    });
});

You can avoid having those variables at all, though, because when you use $.when the callback receives the values from the two promises; note that since it's a $.get, the value is an array with the data as the first item in the array.

$(document).ready(function () {
    $.when(
        $.get("./gamelist-english.txt"),
        $.get("./gamelist-spanish.txt")
    ).then(function(english, spanish) {
        $('#compare').mergely({
            cmsettings: { readOnly: true, lineNumbers: true },
            lhs: function(setValue) {
                setValue(english[0]); // <== Note the [0]
            },
            rhs: function(setValue) {
                setValue(spanish[0]); // <== Note the [0]
            }
        });
    });
});

Yes! This worked. I didn't think about that. Thank you very much! — Arturo, Aug 24 '15 at 13:39

Jquery and global variable scope issue between functions

1 Answers1