Creating a loading image while ajax function loads [duplicate] - php

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

You can approach this in a couple of different ways, you can either
Preload image and create the element when the request is sent and destroy it after it's done
Create it along with the document and then hide it until the request is sent, and then hide it again when it's done
A combination of the two: Preload and create element in javascript, and from there just hide/show the element at each request/completion.
#1 Is probably most preferred when the request is rarely sent, since it doesn't interfere with the document's load, but rather loads after everything else is done. Since creating/destroying an element takes up more processing time than simply hiding/showing the element, this is not a recommended approach.
#2 Is preferred when the request is sent frequently, since you'll be using the loader image often, there is no need to create/destroy it and just have it available from the start. I recommend this approach.
#3 Is preferred when you want to play it safe. This doesn't load the image until the page is done loading and requires very little processing time.
Example #1 | Code
HTML
<div id='content'></div>
Javascript
var PreloadIt = new Image(441,291);
PreloadIt.src="loader.gif";
var http = new XMLHttpRequest();
var url = "thepage.php";
var params = "whatever=you&want=in+here";
http.open("POST", url, true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
document.getElementById('content').removeChild(document.getElementById('ajaxloader'));
document.getElementById('content').innerHTML = http.responseText
}
}
function BeginLoading(){
var eLoader = document.createElement("img");
eLoader.src = "loader.gif";
eLoader.alt = "";
eLoader.id = "ajaxloader";
document.getElementById('content').appendChild(eLoader);
http.send(params);
}
BeginLoading();
Example #2 | Code
HTML
<div id='content'>
<div id='ajaxloader'><img src="loader.gif" style="display: none"/></div>
</div>
Javascript
var http = new XMLHttpRequest();
var url = "thepage.php";
var params = "whatever=you&want=in+here";
http.open("POST", url, true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
document.getElementById('ajaxloader').style.display = "none";
document.getElementById('content').innerHTML = http.responseText
}
}
function BeginLoading(){
document.getElementById('ajaxloader').style.display = "block";
http.send(params);
}
BeginLoading();
Example #3 | Code
HTML
<div id='content'></div>
Javascript
function CreateLoader(){
var img = document.createElement("img");
img.id = "ajaxloader";
img.src = "loader.gif";
img.alt = "";
document.getElementById("content").appendChild(img);
img.show = function(){ img.style.display = "block"; }
img.hide = function(){ img.style.display = "none"; }
img.hide();
return img;
}
var eLoader = CreateLoader();
var http = new XMLHttpRequest();
var url = "thepage.php";
var params = "whatever=you&want=in+here";
http.open("POST", url, true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
eLoader.hide();
document.getElementById('content').innerHTML = http.responseText
}
}
function BeginLoading(){
eLoader.show();
http.send(params);
}
BeginLoading();
Misc
I would recommend keeping track of the returned status. When a request fails, your code will return an error, since you're not handling it. Make sure that the request was a success and handle your errors.
You should also consider using encodeURIComponent(), if you've got data with special characters, like spaces and such.
var category = document.getElementById('category').value;
var brand = document.getElementById('brand').value;
var item = document.getElementById('item').value;
var url = "main_search_special.php"
var parameters = "section=special&category=" + encodeURIComponent(category) + "&brand=" + encodeURIComponent(brand) + "&item=" + encodeURIComponent(item);
ajaxRequest.open("GET", url+"?"+parameters, true);
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4 && http.status == 200){
var ajaxDisplay = document.getElementById('main_result');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}else{
console.log("Request for \""+url+ "\" failed.");
}
}
ajaxRequest.send();

Answer 2

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);

Answer 3

I'd recommend putting the return action into its own function to make it look a little cleaner
But all you have to do to add an image is:
Before you do your send (basically anywhere in the function), create the image element and append to whatever element in your html you like
When you get a return from your ajax call, delete the image element.

Answer 4

this is what you can do-
set an image at your favorite position.make it's visibility to hidden.before making a call to php make it's visibility to visible and again after response from php file you can make your image's visibility to hidden.
This is one of the way you can do this,there are also other ways.
search.onclick = function()
{
var ajaxRequest;
document.getElementById("image_loading").style.visibility = "visible";
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.getElementById("image_loading").style.visibility = "hidden";
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);
}