Ajax where does the loading thingy go?

[shadiadiph]

Hi sorry I am very new to AJAX and javascript probably a silly question but where can I put

document.getElementById("loading").innerHTML='loading...';

in the following so it appears when it is loading and disappears when it is loaded?

function getstate(){

var xmlHttp;
    try{    
        xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
    }catch (e){
        try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
        }catch (e){
            try{
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                alert("Please Activate Javascript in your browser to continue.");
                return false;
            }
        }
    }
    xmlHttp.onreadystatechange=function(){
     if (xmlHttp.readyState == 4) {
     if(xmlHttp.status == 200) {

document.getElementById("tempresult").value=xmlHttp.responseText;

var stateval;
var stateval = document.getElementById("tempresult").value;

var stateval = stateval.trim();

if (stateval=="nostates")
{
document.getElementById('staterow').style.visibility='hidden';
document.getElementById('cityrow').style.visibility='hidden';
document.getElementById('postalrow').style.visibility='hidden';
getcitybycc();  
}
else
{
document.getElementById('staterow').style.visibility='visible';
document.getElementById('stateinput').innerHTML=xmlHttp.responseText;
document.getElementById('cityrow').style.visibility='hidden';
document.getElementById('postalrow').style.visibility='hidden';
}

    }
  }
}
      var url="submitsignup.php"; 

      document.getElementById("tempresult").innerHTML=''; 
      document.getElementById('staterow').style.visibility='hidden';
      document.getElementById('cityrow').style.visibility='hidden';
      document.getElementById('postalrow').style.visibility='hidden';
      var country;
      var country = document.getElementById("country"); 

      var getstate;
      var getstate = 'getstate';

      var params = "country="+country.value+"&getstate="+getstate;

      xmlHttp.open("POST", url, true);
      xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xmlHttp.send(params);

}

[fxm]

appears when it is loading and disappears when it is loaded?

Have you tried your code without it?
At first glance it appears that [even with a 'busy' server] the data requested by this code may load so quickly that such a message would never be in place long enough for it actually to be seen.

[Taywin]

I agree with fxm.

Anyway, there are many ways to do this. One way to do this is to write and delete message from your main HTML. Assuming that you have a div "loading" element inside your main HTML. At the top of your Ajax call function, you could put...

document.getElementById("loading").innerHTML="loading";

Once you get the result from the Ajax (could be at the bottom of Ajax call function), you could delete it.

document.getElementById("loading").innerHTML="";

[fxm]

At the top

The start of the server interaction is near the bottom of this snippet.

[fxm]

alert("Please Activate Javascript in your browser to continue.");

If that message appears, the advice is meaningless.
It should at least be

alert("Your browser does not support XMLHttpRequest.");

or [if you really ever expect it to appear] something more meaningful to a user.

[shadiadiph]

Ok thanks for the advice guys