Simple Ajax Help

[chrisdpucci]

Hey guys,

I've just recently started getting my feet wet with Ajax and have a quick question. It seems like it should be fairly simple so hopefully someone can help.

I have this function that loads dynamic content into a div element:

function makerequest(serverPage, objID)
{
	var obj = document.getElementById(objID);
	xmlhttp.open("GET", serverPage);
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
		{
			obj.innerHTML = xmlhttp.responseText;
		}
	}
xmlhttp.send(null);
}

The xmlhttp object is an ajax object created elsewhere in the code.

Basically what I am wanting to do is modify this so that while it's waiting for the external page to load it displays a standard style loading gif in the destination div element.

I've been programming php for a long time so I have an idea of how I would do it in php, but I've unfortunately neglected javascript so the syntax is still somewhat foreign to me, (although I'm learning more everyday ).

Anyway if someone could help that would be great.

thanks,

Chris

[Pepejeria]

Simply show the animated gif at the same time that you call the makerequest function. Then hide it when the request is done (inside the if).

[chrisdpucci]

Thanks for the help.

I'm not sure I really understand how to do what you are saying. If you could help with showing me how you would go about it with code, that would be helpful. I mean it sounds easy enough but I guess I'm missing exactly how to do it.

thanks again,

Chris

[Pepejeria]

Have an animated gif in the HTML. Set it to be hidden (Use the display property). Give the image an id so that you can access it using getElementById.

You can simply change the CSS display property once you have a reference to the image. When your ajax request is called, then show the image by changing the display property. Once the request is done you change it back to what it was initially.

Read up on these stuff in the links above. They should give you a good understanding on how to do this.