Question

function handleServerResponse() {
       if (xmlhttp.readyState == 4) {
         if(xmlhttp.status == 200) {
           document.getElementById("message").innerHTML=xmlhttp.responseText; 
         }
         else {
            alert("Error during AJAX call. Please try again");
         }
       }

So the above is a part of the ajax code that returns a HTML and loads it into the div name message. All I want to do is to hide the div message after 5 seconds after this. I searched a lot but with no concrete answer. Can someone please help me.

Answer 1

You just need to kick off a setTimeout with an inline function to hide the message div.

The basic gist:

setTimeout(function() { /* do something */}, 5000); // Timeout in milliseconds

Combined with your code:

function handleServerResponse() {
   if (xmlhttp.readyState == 4) { 
      if(xmlhttp.status == 200) {      
         document.getElementById("message").innerHTML=xmlhttp.responseText;
         document.getElementById("message").style.display = 'block';
         setTimeout(function() {
            document.getElementById("message").style.display = 'none';
         }, 1000 * 5 /* dismiss after 5 seconds */);
      } else { 
         alert("Error during AJAX call. Please try again"); 
      } 
   }   
}