Question

This is the code I have. I’m trying to insert a image to show that ajax is loading but I just can’t get this right; I tried a lot of possible ways but it just isn’t working. Any suggestions on what to do?

ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var ajaxDisplay = document.getElementById('main_result');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
}
$("#main_result").empty().html('<img src="loading.gif" />');

var category = document.getElementById('category').value;
var brand = document.getElementById('brand').value;
var item = document.getElementById('item').value;
var queryString = "&category=" + category + "&brand="+ brand +"&item="+ item;
ajaxRequest.open("GET", "main_search_special.php?section=special" + queryString, true);
ajaxRequest.send(null);

Answer 1

Just add the image to your display area before you send the request. The results will overwrite it when the request completes.

...
var ajaxDisplay = document.getElementById("main_result");
ajaxDisplay.innerHTML = "<img src='loading.gif' />"
ajaxRequest.send(null);