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
Post a Comment