Hi everyone,
I'm very new to this whole ajax / javascript thing and i have a question regarding the image loader.
Basically i want to add the image when the ajax is doing its stuff but i can't figure out where i need to put the code. As a matter of fact i dont even know what code i should be writing.
Please can someone assist me, google was not very helpful this morning!!

function ajaxFunction(){
	var ajaxRequest;  
	
	try{
		
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				
				alert("Your browser broke!");
				return false;
			}
		}
	}
	
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	var pet = document.getElementById('animals').value;
	var queryString = "?id=" + pet;
	ajaxRequest.open("GET", "view.php" + queryString, true);
	ajaxRequest.send(null); 
}

cheers...

I should expand slightly on my previous post.

i have the image

<img src="images/loader.gif" />

That i would like people to see whilst the ajax is executing but i dont know where to add the code in my code posted previously.

Thanks.

I'd recommend for starters that you use jquery. You can download it at jquery.com
Your code would then look something like this...

function ajaxfunction(){
	var pet=document.getElementById('animals').value;
	$("#ajaxDiv").html('Loading...');
	$.ajax({
	url: 'view.php',
	data: 'id='+pet+'',
	type: 'get',
	cache: false,
	dataType: 'html',
	complete: function (xhr) {
	//when its done with no error print this:
	$("#ajaxDiv").html(xhr.responseText);
	}
	});	
}