javascript cannot show a wait layer while doing ajax

I am trying to popup a message that says getting data, please wait..... in a div(mess) that I am making visible and then when the ajax call is done, I want to hide the message div(mess) and display the results in a display div(disp). The problem is that it only updates the screen after the ajax call. If I do not rehide the message div, they both show up after the ajax call. What do I need to do to fix this? I have also tried to update the innerhtml just for the disp div and it will only show the final assignment. I also tried breaking it into multiple functions, but that did not help.
Here is my code:

function showfonts(){
 document.getElementById("mess").style.left = document.body.scrollLeft+200;
 document.getElementById("mess") = document.body.scrollTop+500;
 document.getElementById("mess").style.visibility = 'visible';
 document.getElementById("disp").style.left = document.body.scrollLeft;
 document.getElementById("disp") = document.body.scrollTop;
 document.getElementById("disp").style.visibility = 'visible';
 var DATETIME = new Date().getTime();
 arg = 'someajaxcall'
 if (window.XMLHttpRequest)  {objHTTP = new XMLHttpRequest()} else
  if (window.ActiveXObject){objHTTP = new ActiveXObject("Msxml2.XMLHTTP")} else {objHTTP = new ActiveXObject("Microsoft.XMLHTTP")}
 }"GET", arg, false);
 tvar = objHTTP.responseText.substring(objHTTP.responseText.indexOf('<HTML>')+6,objHTTP.responseText.indexOf('</HTML>'));
 document.getElementById("disp").innerHTML = tvar;
 document.getElementById("mess").style.visibility = 'hidden';
Who is Participating?
You're using a deprecated method to show/hide your content.  You should use display instead of visibility.  You also need to make the AJAX call asynchronous (thats how other effects are achieved while the call is running).  Finally, I noticed that the code you use to initialize your XMLHttpRequest object is slightly off in the ActiveX section.  Here's an updated function for you:

function showfonts(){
 var mDiv = document.getElementById("mess"); = document.body.scrollLeft+200; = document.body.scrollTop+500; = "block";

 var dDiv = document.getElementById("disp"); = document.body.scrollLeft; = document.body.scrollTop; = "block";

 var DATETIME = new Date().getTime();

 arg = 'someajaxcall'

 if (window.XMLHttpRequest) objHTTP = new XMLHttpRequest();

 else if (window.ActiveXObject) {
   try {
      objHTTP = new ActiveXObject("Msxml2.XMLHTTP")
   } catch(e) {
      try {
         objHTTP = new ActiveXObject("Microsoft.XMLHTTP")
      } catch(e) {}

 else return;

 objHTTP.onreadystatechange = function() {
    if(objHTTP.readyState == 4){
        document.getElementById("mess").style.display = "none";
        document.getElementById("disp").innerHTML = objHTTP.responseText.substring(objHTTP.responseText.indexOf('<HTML>')+6,objHTTP.responseText.indexOf('</HTML>'));
  };"GET", arg, true);
troyd1Author Commented:
This code works perfectly! Thanks for the help and the education. I have a few other open javascript questions if you would like to help.

Thanks, Troy
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.