Ajax/Jquery Loading gif

[dschuett]

I have an onclick that triggers ajax which calls a php script to pull data from MySQL. This information is then displayed in a div. The problem I am having is that sometimes pulling the data from MySQL takes 2-3 seconds, so the div is empty for about 2-3 seconds. How would I go about adding an animated "Loading" gif to display in the div while it is waiting to display the content?

<!--Ajax Mysql Query-->
	<script language="javascript" type="text/javascript">
<!--
	//Browser Support Code
	function ajaxFunction(docId){
        var ajaxRequest;  // The variable that makes Ajax possible!
        try{
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
			// Something went wrong
            alert("Your browser broke!");
            return false;
			}
        }
		}
		// Create a function that will receive data sent from the server
			ajaxRequest.onreadystatechange = function(){
                if(ajaxRequest.readyState == 4){
                        var ajaxDisplay = document.getElementById('basic-modal-content');
                        ajaxDisplay.innerHTML = ajaxRequest.responseText;
				}
			}
        //var invoice_num = document.getElementById('invoice_num').value;
		var invoice_num = document.getElementById(docId).value; // Get previous element ie text input
        var queryString = "?invoice_num=" + invoice_num;
			ajaxRequest.open("GET", "/invoices/scripts/getattachments.php" + queryString, true);
			ajaxRequest.send(null);
	}
//-->
</script>

[Airshow]

Dschuett,

Like this:

function ajaxFunction(docId){
	var ajaxDisplay = document.getElementById('basic-modal-content');
	if(!ajaxDisplay) { return false; }//no point continuing if the display div doesn't exist
	var ajaxRequest;  // The variable that makes Ajax possible!
	try {
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e) {
		// Internet Explorer Browsers
		try {
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	ajaxDisplay.innerHTML = "loading ..."; //alternative 1
	//ajaxDisplay.innerHTML = "images/loading.gif"; //alternative 2
	ajaxRequest.onreadystatechange = function() {
		if(ajaxRequest.readyState === 4) {
			if(ajaxRequest.status === 200) {
				ajaxDisplay.innerHTML = ajaxRequest.responseText;
			}
			else {
				ajaxDisplay.innerHTML = "Error: " + ajaxRequest.status;
			}
		}
	}
	var invoice_num = document.getElementById(docId).value; // Get previous element ie text input
	var queryString = "?invoice_num=" + invoice_num;
	ajaxRequest.open("GET", "/invoices/scripts/getattachments.php" + queryString, true);
	ajaxRequest.send(null);
}

Airshow

[dschuett]

Thanks! - This was EXACTLY what I was looking for! - I really appreciate your help (as you probably noticed, I'm still in the learning stage of Javascript and AJAX).