Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 941
  • Last Modified:

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").style.top = document.body.scrollTop+500;
 document.getElementById("mess").style.visibility = 'visible';
 document.getElementById("disp").style.left = document.body.scrollLeft;
 document.getElementById("disp").style.top = 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")}
 objHTTP.open("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';
1 Solution
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");
 mDiv.style.left = document.body.scrollLeft+200;
 mDiv.style.top = document.body.scrollTop+500;
 mDiv.style.display = "block";

 var dDiv = document.getElementById("disp");
 dDiv.style.left = document.body.scrollLeft;
 dDiv.style.top = document.body.scrollTop;
 dDiv.style.display = "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>'));

 objHTTP.open("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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now