global variable in javascript used in a ajax call

Question

I declared a global variable var idCategories= new Array(); in my file.js I use it in this function

function test() {
    $.ajax({
        type: "GET",
        url: "http://my_site/api/categories?ws_key=" 
             + ws_key  
             + "&PHP_AUTH_USER=" + PHP_AUTH_USER,
        dataType: "xml",
        success: parseXml
    });
    function parseXml(xml) {
        var i = 0;
        $(xml).find("category").each(function () {
            idCategories[i] = $(this).attr('id');
            // length increments at each iteration
            alert("length=" + idCategories.length);                 
            i = i + 1;
        });
    }
    alert("length=" + idCategories.length); //returns 0
}

in the function parseXml(xml) the array length is well incremented but outside of this function length = 0! so that I can't use the array idCategories in another function!

Can you post the entire example, including the global variable declaration? Or create a jsFiddle that reproduces the issue? — Chris Gessler
– Chris Gessler, Commented Mar 18, 2012 at 11:59

Erik Philips · Accepted Answer · 2012-03-18 12:08:23Z

3

The problem is that the AJAX call is ASYNC. So parseXml will most likely, if not always, be called after your alert is called.

Why not:

function test() {
    $.ajax({
        type: "GET",
        url: "http://my_site/api/categories?ws_key=" 
             + ws_key  
             + "&PHP_AUTH_USER=" + PHP_AUTH_USER,
        dataType: "xml",
        success: parseXml
    });
    function parseXml(xml) {
        var i = 0;
        $(xml).find("category").each(function () {
            idCategories[i] = $(this).attr('id');
            // length increments at each iteration
            alert("length=" + idCategories.length);                 
            i = i + 1;
        });
        alert("length=" + idCategories.length); //returns 0
    }
}

edited Mar 18, 2012 at 12:08

answered Mar 18, 2012 at 11:58

Erik Philips

54.9k11 gold badges133 silver badges158 bronze badges

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

Comments

elrado · Accepted Answer · 2012-03-18 12:02:11Z

1

$.ajay is by default asynchronus function! That means thet when it starts to execute it does not block application flow. you're alert statement executes before $.ajax success function. You have two solutions.

set asny parameter to false.

$.ajax({
    type: "GET",
    async: false,

...

call alert in parseXml function.

I belive you're best bet is async:false, but correct way of doing it would be to advance script execution after $.ajax call is finished (execute next step in parsexml function).

answered Mar 18, 2012 at 12:02

elrado

5,3321 gold badge19 silver badges15 bronze badges

4 Comments

Andreas Louv Over a year ago

don't use async = false its the same as var wait = true;while(wait); when ajax is done wait is set to false

epascarello Over a year ago

BUT synchronous calls are bad since they lock up the browser.

elrado Over a year ago

Advance youre execution after async call is finished!

user1223160 Over a year ago

@elrado: this is exactly what I want, but this is also my problem!!

viyancs · Accepted Answer · 2012-03-18 12:07:05Z

1

try to using object and array

function parseXml(xml) {var obj={};var a = [];
  $(xml).find("category").each(function(i)  {
obj["idCategory"]= $(this).attr('id');
a.push(obj);
alert("length="+a.length);// length increments at each iteration
       });
}
alert("length="+a.length);//returns 0

}

edited Mar 18, 2012 at 12:07

answered Mar 18, 2012 at 12:01

viyancs

2,3494 gold badges40 silver badges72 bronze badges

Comments

epascarello · Accepted Answer · 2012-03-18 11:59:16Z

0

This question appears multiple times a day. You are making an asynchronous call, that alert line fires BEFORE the Ajax call is returned.

answered Mar 18, 2012 at 11:59

epascarello

208k20 gold badges206 silver badges246 bronze badges

3 Comments

epascarello Over a year ago

Read the value in the callback function where you do the processing.

user1223160 Over a year ago

But I want to use it in other function also!

epascarello Over a year ago

You have to code your code to wait for it to update, welcome to the world of asynchronous coding. Callbacks are meant to handle this stuff. Look into api.jquery.com/category/deferred-object

Engineer · Accepted Answer · 2012-03-18 11:59:59Z

0

Ajax is asyncronous. Your alert("length="+idCategories.length); code is called before response is delivered.

answered Mar 18, 2012 at 11:59

Engineer

48.9k12 gold badges90 silver badges93 bronze badges

Collectives™ on Stack Overflow

global variable in javascript used in a ajax call

5 Answers 5

Comments

4 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related