jQuery - Ajax and arrays - Undefined variables

[plutomed]

I have some arrays set up. When i try to modify these within the "success" the values of the array have hanged fine. As soon as I leave the ajax request, all the variables are undefined.

$.ajax(
			{
				url: "functions.php",
				data: {page:"updatePlay"},
				success: function(data, textStatus, XMLHttpRequest)
				{
					data = data.split("\\");
					black = data[0];
					white = data[1];
					black = black.split("/");
					white = white.split("/");;
					for(i=0; i<black.length-1; i++)
					{
						temp = black[i].split("-");
						blackPositions[0][i] = "black_"+temp[0];
						blackPositions[1][i] = temp[1];
					}

					for(i=0; i<white.length-1; i++)
					{
						temp = white[i].split("-");
						whitePositions[0][i] = "white_"+temp[0];
						whitePositions[1][i] = temp[1];
					}
					//Here all the variables are set fine.
				}	
			}
		)
//Here all the variables are undefined.

 

Anyone could provide any help, it would be appreciated.

 

[F1Fan]

You need to initialize the variables in the global scope. Then, the request can modify them, allowing the modified versions to be available globally.

[plutomed]

The variables are defined right at the top of my scripts file. Outside everything.

[F1Fan]

Hmm, then I'm not sure. Post the rest of your relevant code, maybe that'll help.

[plutomed]

Variable deceleration:

 

var whitePositions = new Array(2);
for(i=0; i< whitePositions.length; i++)
{
whitePositions[i] = new Array(16);
}
var blackPositions = new Array(2);
for(i=0; i< blackPositions.length; i++)
{
blackPositions[i] = new Array(16);
}

 

placePieces function:

function placePieces()
	{
		$(".piece").remove();

		$.ajax(
			{
				url: "functions.php",
				data: {page:"updatePlay"},
				success: function(data, textStatus, XMLHttpRequest)
				{
					data = data.split("\\");
					black = data[0];
					white = data[1];
					black = black.split("/");
					white = white.split("/");;
					for(i=0; i<black.length-1; i++)
					{
						temp = black[i].split("-");
						blackPositions[0][i] = "black_"+temp[0];
						blackPositions[1][i] = temp[1];
					}

					for(i=0; i<white.length-1; i++)
					{
						temp = white[i].split("-");
						whitePositions[0][i] = "white_"+temp[0];
						whitePositions[1][i] = temp[1];
					}


				}	
			}
		)
	}

 

The it that uses the array:

//Place black pieces
					for(i=0; i<16; i++)
					{
						temp = blackPositions[1][i].split("");
						temp = getPosition(temp[0], temp[1], 0).split("|");
						image = blackPositions[0][i].split("_");
						$("#board").html($("#board").html() + '<div class="piece" id="'+blackPositions[0][i]+'"></div>');
						$("#"+blackPositions[0][i]).css({"left":temp[1],"top":temp[0], "background":"url(pieces/black_"+image[1]+".png)"});

					}

					//Place white pieces
					for(i=0; i<16; i++)
					{
						temp = whitePositions[1][i].split("");
						temp = getPosition(temp[0], temp[1], 0).split("|");
						image = whitePositions[0][i].split("_");
						$("#board").html($("#board").html() + '<div class="piece" id="'+whitePositions[0][i]+'"></div>');
						$("#"+whitePositions[0][i]).css({"left":temp[1],"top":temp[0], "background":"url(pieces/white_"+image[1]+".png)"});

					}

 

I moved that last bit just after the for loop in the function and it works fine except now my click even has stopped working. But thats something else, I need to look at. Really moving the code isn't fixing the problem its just going around it.

 

 

[F1Fan]

So what is calling that last bit of code? Is it in a function or what? If it is not in a function, then it will run before the variables ever get set by the Ajax call. If it is in a function, what is calling that function? If that function is called before the Ajax script completes, they won't be set.

[plutomed]

Ahh now that makes sense. Duh how stupid of me! Thanx!!