Unable to change global variable from local function

Question

I'm trying to have a jQuery.getJSON() call change a global variable with the JSON array it returns:

var photo_info ;

//Advance to the next image
    function changeImage(direction) {

            jQuery('img#preview_image').fadeOut('fast');
            jQuery('#photo_main').css('width','740px');

            if (direction == 'next') {
                    jQuery.getJSON('/ajaxupdate?view&sort='+sort+'&a='+a+'&s=' + title_url_next, function(data) {
                            photo_info = data;
                            title_url = photo_info.title_url;                                                                                          
                            title_url_next = photo_info.preview_title_url_next;                                                                        
                            title_url_previous = photo_info.preview_title_url_previous;                                                                
                    });
            } else if (direction == 'prev') {
                    jQuery.getJSON('/ajaxupdate?view&sort='+sort+'&a='+a+'&s=' + title_url_previous, function(data) {
                            photo_info = data;
                            title_url = photo_info.title_url;
                            title_url_next = photo_info.preview_title_url_next;
                            title_url_previous = photo_info.preview_title_url_previous;
                    });
            }
}

However, the variable photo_info is only accessible from within the getJSON() function and returns undefined from anywhere else in the script.

What am I doing wrong?

pedro · Accepted Answer · 2010-01-30 02:33:29Z

1

as Randal said Ajax call is asynchronous. Use the ajaxComplete function or replace the getJSON function with an .ajax call and use the photo_info var whithin the success function e.g.:

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(photo_info);
  }
});

edited Jan 30, 2010 at 2:33

answered Jan 30, 2010 at 1:42

pedro

4113 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Randal Schwartz · Accepted Answer · 2010-01-30 01:31:42Z

1

If you're looking at photoinfo in the rest of the script right after changeImage has returned, then of course it won't have a value, because the Ajax call is asynchronous. You need to rethink your application to be more event driven.

answered Jan 30, 2010 at 1:31

Randal Schwartz

44.8k4 gold badges51 silver badges83 bronze badges

2 Comments

ensnare Over a year ago

Hi -- photo_info is not accessible even from within the changeImage() function. Thanks.

pedro Over a year ago

Randal is right, because even within the changeImage function the ajax call has not returned yet. See my answer for options on how to solve the problem.

Joel Etherton · Accepted Answer · 2010-01-30 01:32:32Z

1

JavaScript scoping isn't quite like standard scoping. It looks like you're actually losing your scope because of nested functions. Try giving this article a read:

http://www.robertsosinski.com/2009/04/28/binding-scope-in-javascript/

answered Jan 30, 2010 at 1:32

Joel Etherton

37.5k10 gold badges92 silver badges106 bronze badges

Collectives™ on Stack Overflow

Unable to change global variable from local function

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related