Dom problem within AJAX request

Question

I have been stuck on this problem for almost 2 days now, consider the following code:

'.country-select' occurs twice in the form ( input),

$('.branch-row').hide();
$('.country-select').change(function(){
    console.log($(this));
    country_select = $(this);
    $.get('get_country_branches.php',
        'country=' + $("'#" + country_select.attr('id') + " option:selected'").val() + '&field=' + $(':input:eq('+($(":input").index(country_select) + 1) +')').attr('name'),
        function(html){
            $(':input:eq('+($(":input").index(country_select) + 1) +')').html(html);
            //debug 1
            console.log(country_select);
            country_select.parent().parent().next().show();
        },
        'html'
    );

}).change();
//debug 2
console.log(country_select);

the output from the debug 1 are both the same object:

[select#pays-dem.country-select] [select#pays-dem.country-select]

however the output from debug 2 is correct:

[select#pays-enlev.country-select] [select#pays-dem.country-select]

It seems that the problem lies within the $.get() AJAX function and the country_select object.. Any idea wtf is going on?

Answer 1

You need to put a var before country_select to make it a local variable. Currently its being defined in the global scope.

Once you do that you won't be able to do the second console.log as the variable will be out of scope at that point.

Answer 2

By not putting var in front of the country_select variable, it's being bound in the global space rather than local to the function. Also, I don't think you need to requery to get the selected value of the select. Using val() ought to be enough. I'd try to simplify the selection of what I think is the next input following the select. Try something like this:

$('.country-select').change(function(){
    console.log($(this));
    var country_select = $(this);
    $.get('get_country_branches.php',
        'country=' + country_select.val() + '&field=' + country_select.next('input:first').attr('name'),
        function(html){
            country_select.next('input:first').html(html);
            //debug 1
            console.log(country_select);
            country_select.parent().parent().next().show();
        },
        'html'
    );

}).change();

BTW, this will break the console.log following the function since the variable is no longer in the global scope.

Answer 3

Just wanted add some details to my answer above.

Whenever you use a variable in JavaScript without declaring it in function scope (using the var keyword), it is added in the global window scope.

So following will hold true

function myFunction(){
i=99;
if(i==99 && window.i == i){
alert("It went into global scope");
}
} 

myFunction();
if(i==99 && window.i == i){
alert("Same here");
}