loader - How to "white out" old content while loading new with ajax? -


i made first activity loader display while loading shipping_estimate.php file current file. want have old content covered semitransparent white image , have loader on top of it.

i tried set semi transparent image backround of activity loader div, tried combinations image gets behind loaded php.

ajax function:

function load_shipping(str) {    var xmlhttp; showloader();  if (str.length==0)   {    document.getelementbyid("txthint").innerhtml="";   return;   }  $(function() {         $('#busy1').activity();     }); if (window.xmlhttprequest)   {// code ie7+, firefox, chrome, opera, safari   xmlhttp=new xmlhttprequest();   } else   {// code ie6, ie5   xmlhttp=new activexobject("microsoft.xmlhttp");   } xmlhttp.onreadystatechange=function()   {   if (xmlhttp.readystate==4 && xmlhttp.status==200)     {     document.getelementbyid("shpquote").innerhtml=xmlhttp.responsetext;     $(function() {         $('#busy1').activity();          });      }   }  xmlhttp.open("get","shipping_estimate.php?c="+str,true); xmlhttp.send(); }  <?php echo "load_shipping($c);"; ?> </script> 

this content , loader placed to. class="trans_box1" means has semitransparent bg image set in css.

<table  align="right"> <tr> <td> <div id="busy1" class="trans_box1"> <div id="shpquote"> </div></div> </td> </tr> </table> 

i have never, not once got image in top of shipping_estimate.php, alwais behind it, maybe because php loade after image?

also tried this, doesn't work, loader not visible @ all.

<div id="shpquote" class="trans_box1;position:relative;width:300px;height:300px;" style="float:left"> <div  id="busy1" class="trans_box2" style="position:absolute;z-index:999; width:300px;height:300px;"> 

you overcomplicating bit.. using jquery easier might this:

function loadshipping() {  //show loader here  //maybe   $('#busy1').css({'opacity' : '1'});  $.get('shipping_estimate.php?c='+str, {}, function(response) {    //the response handled here    $('#shpquote').empty(); // clear old stuff    $('#shpquote').text(reply); //or similar    $('#busy1').css({'opacity' : '0'}); //hide loader or overlay  }); } 

hopefully helps - there lots of jquery ajax examples on also.


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -