How to show please wait while ajax request process in complete - ajax

Question

this code is working fine, all that i want is to make ajax say please wait while still requesting for information: here is this code.
function products(){
if (document.getElementById('date').value.length == 0) {
alert("Please Pick Date");
document.getElementById('date').focus();
return false;
}
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('sum');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var usr = document.getElementById('usr').value;
var date = document.getElementById('date').value;
var queryString = "?usr=" + usr + "&date=" + date;
ajaxRequest.open("GET", "ajax_prom.php" + queryString, true);
ajaxRequest.send(null);
}

Answer 1

In your page, add a div with the id - divAjaxRequestInProgress. Add the text you want to show while the ajax request is in progress to this div. You could have an animated gif as well. Now, show this when you start your ajax processing and hide it once the request is complete.
function products(){
if (document.getElementById('date').value.length == 0) {
alert("Please Pick Date");
document.getElementById('date').focus();
return false;
}
$("#divAjaxRequestInProgress").show();
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('sum');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
$("#divAjaxRequestInProgress").hide();
}
var usr = document.getElementById('usr').value;
var date = document.getElementById('date').value;
var queryString = "?usr=" + usr + "&date=" + date;
ajaxRequest.open("GET", "ajax_prom.php" + queryString, true);
ajaxRequest.send(null);
}
I have just added 2 lines to your code - one to show and one to hide the div.