menu

Thursday, 5 December 2013

how to show loader image before loading from ajax data php

<html>
<body>
<script language="javascript">function loaddata(){
datastring = 'favour='+id+'&itemsId='+chkItem;

                        jQuery.ajax({

                        type: "POST",  

                        url: "cuponcode.php",  

                        data: datastring,   
                        beforeSend:function(){

                        jQuery('#overlay_loader').css("display","block"); 

                        },
                        success: function(data){ 

                        jQuery('#overlay_loader').css("display","none");

                        alert('Your coupon code is created successfully for selected items');

                        // jQuery("#fav_itm").html(data);

                        },

                            error:function(data){

                            alert(data);

                            }       

                        });
}
</script>
<style>#overlay_loader {
     display:none;  
    position:fixed; 
    left:0px;       
    top:0px;        
    width:100%;     
    height:100%;    
    /*background:#000; */
    opacity:0.5;    
    z-index:99999;
    background:url("images/loader_icon.gif") no-repeat center center rgba(0,0,0,0.5);
    }
</style>
<div id="overlay_loader"></div>

<button name="send" onClick="loaddata();">Send</button>
</body>
</html>