javascript cannot show a wait layer while doing ajax

Posted on 2007-10-02
Last Modified: 2008-01-09
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';
Question by:troyd1
    LVL 12

    Accepted 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"); = 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);

    Author Comment

    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

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Join & Write a Comment

    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    733 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now