Issue with Progress Bar Visibility in AJAX Call: I have a requirement to display a progress bar in an overlay after the save button is clicked. However, the progress bar is only visible after we receive the response from the AJAX call and display an alert message indicating that the operation was successful. Is this the expected behavior or am I doing something wrong? Keep in mind that I need to achieve this using pure JavaScript without relying on external libraries.
<script>
function save(){
document.getElementById('overlaydiv').style.display = 'block';
document.getElementById('progressBarDiv ').style.display = 'block';
var URL = 'some url';
ajaxFunction(URL, false);
}
function ajaxFunction(URL, isAsynchronousCall){
var xmlHttp;
var callTypeFlag = true; // is an Asynchronous Call
if(isAsynchronousCall != null){
callTypeFlag = isAsynchronousCall;
}
try{
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}catch (e){
alert("Your browser does not support AJAX!");
return false;
}
xmlHttp.open("GET", URL, callTypeFlag);
xmlHttp.onreadystatechange = function(){responseProcessor(xmlHttp)};
xmlHttp.send(null);
}
function responseProcessor(xmlHttp){
//If the readystate is 4 then check for the request status.
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
alert('Settings saved successfully');
window.close();
opener.location.href='new URL';
}
}
}
</script>
<div id="overlaydiv" style="display:none"/>
<div id="progressBarDiv" style="display:none">
<img border="0" src="progressBar.gif"/>
</div>
<div>
<table>
<tr>
<td>
<input type="button" onclick="save()"/>
</td>
</tr>
</table>
</div>