How to show loading message for AJAX applications?

39 sec read

Lets say you have a new user registration page where you validate user entered loginid against the database using Ajax and immediately display available or not.

for this you might do like..

1. Detect onChange event of the text field
2. read input and call Ajax
3. process ajax output and display availability in the adjacent div or span tag using innerHTML.

Sometimes it may take a while for ajax to complete the process of calling the remote database and read back responseXML, now if you want to show a loading or processing screen for that moment ?, just use this tip.

While onChange event of the text field occurs…

function loginID_OnChange(){
  //set the div tag to show loading message
   document.getElementById(“opmsg”).innerHTML = ”    checking availability…”;
   // call the ajax for checking the loginid
   var result = myAjaxFunction(loginidvalue);
   // show the new value in the div tag
   document.getElementById(“opmsg”).innerHTML = result;
}

LoginID: checking availability…
Password:
….
LoginID: loginid not available. Please try another.
Password:
….

You can also find some animated activity gif from this site.

Related posts:

3 Replies to “How to show loading message for AJAX applications?”

Leave a Reply

Your email address will not be published. Required fields are marked *