AJAX loading animation

[Tekkno]

I have the following AJAX script:

function callAHAH(url, pageElement, errorMessage) {
     document.getElementById(pageElement).innerHTML;
     try {
     req = new XMLHttpRequest(); /* e.g. Firefox */
     } catch(e) {
       try {
       req = new ActiveXObject("Msxml2.XMLHTTP");  /* some versions IE */
       } catch (e) {
         try {
         req = new ActiveXObject("Microsoft.XMLHTTP");  /* some versions IE */
         } catch (E) {
          req = false;
         } 
       } 
     }
     req.onreadystatechange = function() {responseAHAH(pageElement, errorMessage);};
     req.open("GET",url,true);
     req.send(null);
  }

I am trying to implement a loading animation but cannot get it to work. I imagine I will need to use a variable for line #2 but I am not very familiar with javascript. Currently I have an img in place with an id assigned to it. I just need help figuring out how to properly call it in the javascript. If there are any questions please let me know.

One more thing I want to mention is that I current have the image set to display: none; so I imagine I will need .style.display = ''; in the script.

[Airshow]

I guess you want something like this:

function callAHAH(url, pageElement, errorMessage){
  var el = document.getElementById(pageElement);
  try { req = new XMLHttpRequest(); }// e.g. Firefox
  catch(e) {
    try { req = new ActiveXObject("Msxml2.XMLHTTP"); }// some versions IE
    catch (e) {
      try { req = new ActiveXObject("Microsoft.XMLHTTP"); }// some versions IE
      catch (e) {
        el.innerHTML = "Sorry your browser doesn't support AJAX.<br>This page will suffer some loss of functionlity.";
        return false;
      }
    }
  }
  el.innerHTML = "Loading ....";//Simple loading message. (Replace with fancy animation if you want) This will be overwritteen when the AJAX request has completed.
  req.onreadystatechange = function() {
    if(req.readyState == 4){//When AJAX request is complete
      if(req.status == 200){// only if "OK"
        el.innerHTML = req.responseText;//Display the AJAX response.
      }
      else {// if not "OK"
        el.innerHTML = errorMessage;//Display the error message passed as a parameter to this function.
      }
    }
  };
  req.open("GET", url, true);
  req.send(null);
}

(Not tested)

While the AJAX request is being serviced, you should get a simple "Loading ..." message, which is then replaced with either the AJAX response or your error message when the request has completed.

With help from comments in the code, you should be able to modify to get exactly what you want.

Airshow

[Tekkno]

Airshow,
Thanks for the input. I have been able to accomplish the text loading similarly to what you have suggested. However, I am not sure how to point the message to an ID that is attached to an image.
For example, if I do el.innerHTML = 'img_id'; it just echoes text to the browser.

[Fungus1487]

As a side to this its great to learn from the ground up but save yourself some time and use a javascript library. jQuery (and many others) can achieve what you are trying to do in 5 lines.

function callAHAH(url, pageElement, errorMessage) {
    $(pageElement).load(url, function(responseText, textStatus, XMLHttpRequest) {
        if(textStatus == "error") {
            $(this).text(errorMessage);
        }
    }).text('Loading...');
}

[Tekkno]

That is true Fungus, but that still only shows text, it does not use an animated .gif like I am trying to do. I guess I just want to know how to change .text to something that will recognize a file.

[jet1337]

yea that will be good know know image one. But the way thanks for text version.

[Fungus1487]

This is an old thread but the principle is the same for an image.

First of all get yourself an animated gif.

Then change the above code to look something like..

function callAHAH(url, pageElement, errorMessage) {
    $(pageElement).html('<img src="yourimage.gif" />').load(url, function(responseText, textStatus, XMLHttpRequest) {
        if(textStatus == "error") {
            $(this).text(errorMessage);
        }
    });
}

Just change the 'yourimage.gif' to the path of your animated gif