CODEWITHSUNDEEP
javascriptjqueryscope
user316602
user316602

Reputation:

Basic Javascript Global Scope Issue

I'm having issues with scope in Javascript. Take a look at this code, for example:

$(function() {
    var items = "GLOBAL";

    $('.add').click(function() {            
        $.post("main/get", { 'get' : 'all' },
        function(data){
            items = String(data.result);
            items = items.split(' *** ');
            alert(items);
        }, "json");
        alert(items);
        return false;
    });

    $(".add").autocomplete({
        source: items
    });
});

I'm trying to get autocomplete working, and it almost is. The only problem is that I can't seem to change items outside of the inner-most function. The first alert gives me what I'm looking for, but the second just gives me "GLOBAL." The bottom autocomplete part has to be able to access it.

Any help is appreciated!

Thanks!

Upvotes: 0

Views: 203

Answers (1)

Daff
Daff

Reputation: 44215

It is not just a scope issue. Since your request is very likely to happen asynchronously (unless configured otherwise) it won't work that way anyway. You have to initialize the autocomplete in the callback function which gets called once your AJAX request is complete:

$(function() {
    $('.add').click(function() {            
        $.post("main/get", { 'get' : 'all' },
        function(data){
            var items = String(data.result);
            items = items.split(' *** ');
            $(".add").autocomplete({
                source: items
            });
        }, "json");
    });
});

Upvotes: 2

Related Questions