Trouble with "wait screen" for Ajax

[ryantroop]

Having a little trouble getting my "pre-loader" to show properly... I would assume, what this script would do is that once xmlhttp is invoked, JS would make a div with an ID called 'preload' and it will persist until we get a 400 response from the server, and then destroy the div.

As a note, I am using an animated .gif as a background for the div that is set in an external CSS. Do I need to define the background within the javascript?

Thanks!

Ryan

<script type="text/javascript">
 function showProducts(str)
 {
 if (str=="")
   {
   document.getElementById("products").innerHTML="";
   return;
   } 
if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 xmlhttp.onreadystatechange=function()
   {
       var body = document.getElementById('main');
       var ajaxLoader = document.createElement('div');
       ajaxLoader.setAttribute('id', 'preload')
       body.appendChild(ajaxLoader);
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
       var ajaxLoader = document.getElementById('preload');
       document.getElementById('main').removeChild(ajaxLoader);
     {
     document.getElementById("products").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("POST","return.php",true);
 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xmlhttp.send("prod_list="+str);
 }

[rayidi]

Dear ryantroop, you no need to create a div dynamically. First you create div statically set the div style display:none

<div id='preload' style='display:none;'><img src='images/loader.gif'/></div>

On the function start you can display this div by setting the style to block. And again on the success response you can hide the div again.

<script type="text/javascript">
    function showProducts(str)
    {
    document.getElementById("preload").style.display="block";
    if (str=="")
    {
    document.getElementById("products").innerHTML="";
    return;
    }
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("preload").style.display="none";
        document.getElementById("products").innerHTML=xmlhttp.responseText;
    }
    }
    xmlhttp.open("POST","return.php",true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("prod_list="+str);
    }
</script>

Hope this will work fine..

[Taywin]

Create & destroy an image div may not be a good idea if the client browser needs to get the image to load after the page finished loading. Show and hide trick as krish said is a good way to deal with. You could also make use of z-index too if you want.