More javascript woes (help!)

Karl · 3 Sep 2007 at 16:27

Okay, problem number two.

I've got a bit of code:

Code:

xmlHttp.onreadystatechange=caravanSearchStateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);

That fetches some html that's just been printed by an ASP page, and prints it to a div.

There's some code afterwards:

Code:

if (document.getElementById('hideHeaders').value == '1') {
	document.getElementById('resultsHeader').className = ' none';
}
else {
	document.getElementById('resultsHeader').className = 'floatleft paddingtop15';
}

That checks a hidden HTML field for a 1 or a 0. If it's a 1, it hides a div. If it's a 0, it shows a div. By default in the html, the field is set to 0.

Trouble is, the if statement is delayed. If I want to hide that div, I have to wait for the condition to get a 1 twice. Vice-versa for the 0.

However, if I put an alert saying "hello world!" between the two code snippets I gave you, it works!

It's almost as though the HTML is being written too late for the javascript to validate the if statement.

Trouble is, if I put a sleep function I found between those bits of code, it doesn't work.

What the hell is the problem here?

Any help's appreciated because I'm stuck!

Cheers,

Karl.

Pulseammo · 3 Sep 2007 at 16:57

I don't know anything about javascript or ajax etc, but your sleep function and your debug print are obviously different because one creates on screen output, one doesn't. Does that perhaps help diagnose the problem?

edit: (Sorry to not be much help but you got me interested ;P)

Karl · 3 Sep 2007 at 17:23

Sorry, it doesn't help really, no.

They do indeed act differently, but I thought that perhaps the code waiting on the user to click okay was allowing something else to process in the mean-time. I tried a pause function, but it failed to make a difference, and it paused in the wrong place anyway (My alert allows the process to complete, it seems, whereas pause obviously stops it dead in its tracks).

Someone mentioned to me that they had a similar problem that was fixed by specifying the document type in the xmlHTTP object, but it didn't make a difference for me.

Ladforce · 3 Sep 2007 at 19:18

I think you need to connect the javascript to the event. This will force it to be run on time.

JIMA · 3 Sep 2007 at 19:54

Hi,

I think the problem is that the call to xmlHttp.open is performed asynchronously. So, the call is done and your Javascript carries on without waiting for open to complete. Adding the "Hello World" alert delays things enough so that the open is completed before the if is reached. I think that putting sleep in might cause everything to wait, including the .open method (not sure about that though).

Try specifying the .open to be synchronous (change your true to false) and see if that works. I'm no expert on this but looking at the following link http://msdn2.microsoft.com/en-us/library/ms757849.aspx
might help.

Hope that helps.

Jim

Karl · 4 Sep 2007 at 16:59

Hi JIMA,

You my friend are a god.

I didn't know that was an asynchronous property, and that xmlHttp has a property called onreadystatechange which allows you to check to see when this has completed.

I created a method that checks to make sure it's completed, and then performs my javascript.

So:

Code:

	xmlHttp.onreadystatechange=caravanSearchStateChanged;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);

where caravanSearchStateChanged is the method below:

Code:

function caravanSearchStateChanged() 
{ 
	if (xmlHttp.readyState==4)
	{ 
			document.getElementById("ajaxSearchResults").innerHTML=xmlHttp.responseText;	

			if (document.getElementById('hideHeaders').value == '1') {
				document.getElementById('resultsHeader').className = ' none';
			}
			else {
				document.getElementById('resultsHeader').className = 'floatleft paddingtop15';
			}
	}
}

And that's done the job!

I'm going to blog about this to make sure other people know about this. It took me ages to figure that out!

I couldn't have done that without your help mate, thanks very very much! I owe you a beer!