Ajax miss behaving

[Cheeki]

Hey guys,

Im having the weirdest problems with my ajax. Now first off i have horrible coding convention!! I have one Ajax.js file which handles all my ajax requests and one ajax.php file which handles retrieving data from a database.
The problem I am having is when ever I call a certain method which contains a if statement and runs the respective ajax function, it sometimes evaluates the if statement wrong. The weirdest thing of all is when I use FireFox's firebug and step through the javascript code to see why its evaluating the if statement wrong, it evaluates it correctly.

So basically if I don't step through the javascript code it evaluates the if statement wrong which means one of my variables are not being set in time for it to be used in the if statement. BUT if i step through the code with firebug it evaluates the if statement correctly!!!!!!

Now I have tried this is all the browsers and sometimes it evaluates the if statement correctly and when i keep refreshing the page it will sometimes evaluate the if statement correctly!!!!

Now I know this makes no sense, but I'm just as confused! The only reason I can think why this is happening is that one of my variables are not being set in time for the if statement to use it!!

Can anyone help me pleeeeaaassee!!! ITS DRIVING ME INSANE!!!!

[Luckychap]

As you know Ajax is asynchronous, so your thinking is correct. The variable is set synchronously and respond is asynchronous(ajax). Check your code where the ajax request has completed for that variable.

[Cheeki]

I was thinking it would be a problem along those lines. Now I really don't know Ajax 100%, I know its basic functionalities.

Now below is the code which I think is causing the problems. Basically whats happening is that I go to a php method which calculates the total size of buttons and other values and returns these values. Then as you can see I call a method:

HandleResponseFlowButtonSize(xmlHttp.responseText);

which passes the "response" from the php method and breaks the response up accordingly and sets the values to different variables.

function getbuttonSize(id)
{
	checkNumofContainers();
	
	var xmlHttp = getXMLHttp();
	
	xmlHttp.onreadystatechange = function()
	{
		if(xmlHttp.readyState == 4)
		{
			 HandleResponseFlowButtonSize(
                                         xmlHttp.responseText);
		}
	}
	
	xmlHttp.open("GET", '../ajax/ajax.php?action=checkNumberofButtons&value='+id, true);
	xmlHttp.send(null);	
}

function HandleResponseFlowButtonSize(response)
{
	var reply = response;
	var displayButtos = new Array(500);
		
	var getReply = reply.split(",");
	
	for(i = 0; i < 1; i++)
	{
		buttonSize = getReply[i]; 
		displayButtonNum = getReply[i+1];
		numofButtons = getReply[i+2];
	}
	buttonSize = Number(buttonSize);
	displayButtonNum = Number(displayButtonNum);
	numofButtons = Number(numofButtons);
}

Do you maybe have a different or should I say better way of doing this??

[Luckychap]

This code seems absolutely fine. But you need to check if function 'HandleResponseFlowButtonSize(response)' is called only once.
And also check if function 'getbuttonSize(id)' is called once for every request.

If any of the above are called twice then there is something wrong else where.

One thing more Ajax is browser dependent so use some good libraries like (YUI) http://developer.yahoo.com/yui/connection/

This will simplify your code to great extend and will take care of browser compatibilities.