0

I just want to load the spinner when i click on the send email button, where I'm sending the email using ajax function.Once the email is sent I want to hide the spinner. Here is my code:

My spinner loading div

<div id="loader" class="loader" style="display:none;"></div>

Spinner class

<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://test:8000/images/page_loader.gif') 50% 50%   no-repeat rgb(249,249,249);    
}
</style>

My jquery:

$("#send_mail").click(function(){
    $(".loader").show();
    var subject = $("#subject").val(); 
    var token = "{!! csrf_token() !!}";
    var order_id = "{{ @$orders->id }}";
    var url = "{!! URL::to('/') !!}";
    $.ajax({
        type: 'POST',
        url: url +'/order/'+order_id+'/sendmail',
        data: {'_token':token, 'subject':subject },
        async : false,
        beforeSend: function() { 

        }, 
        success : function(data) {
            setTimeout(function()
            {
                $(".loader").fadeOut("slow");
            },9000);
            var result = JSON.parse(data);
            if(result)
            {
                $("#email_modal").modal('hide');
                if(result['status'] == 'success')
                {
                    $("#mail_success").show();
                    setTimeout(function()
                    {
                        $('#mail_success').hide();
                    },3000);
                }
                else
                {
                    $("#mail_error").show();
                    setTimeout(function()
                    {
                        $('#mail_error').hide();
                    },3000);
                }
            }
        },
        error: function(data){
            alert(data);
        }
    });
});

The problem is, my spinner is started to load after the mail has been sent. Can anyone help me with this like what mistake I'm doing here???

Will appreciate your help!!!

Thanks in advance.

cathy123
  • 533
  • 1
  • 7
  • 13
  • See the answer on this link http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery?rq=1 – Mads... Aug 25 '16 at 07:18
  • I used this one too... but not getting proper response.. – cathy123 Aug 25 '16 at 07:28
  • Actually I'm working all these in a modal window. Now tell me am I missing something. Because I tried many methods for this simple process but didn't get the proper output.... – cathy123 Aug 25 '16 at 07:35

1 Answers1

0

you need to show the loader inside beforeSend callback and hide in error or success callback.

JS CODE:

 //hide the spinner by default in css 'display:none'
 $.ajax({
   data:...
   url:....
   beforeSend:function () {
        $('.loader').show();
   },
   success:function(){
        $('.loader').hide();
        .....
   },
   error:function(){
       $('.loader').hide();
       .....
   });
dreamweiver
  • 5,860
  • 2
  • 25
  • 38
  • Yeah I even tried this one too... but nothing happens.I don't know whats happening. The thing is, when I click the send mail button it should display the spinner. But its not happening. – cathy123 Aug 25 '16 at 07:24
  • it should work, unless u have issue elsewhere, check this sample jsfiddle , http://jsfiddle.net/Behseini/vx1j3gx9/ – dreamweiver Aug 25 '16 at 07:28
  • Actually I'm working all these in a modal window. Now tell me am I missing something. Because I tried many methods for this simple process but didn't get the proper output.... – cathy123 Aug 25 '16 at 07:35
  • there were some issues with your code, i have commented those. **1.** Remove the initial `.loader.show()`, its not required anymore. **2.** Also remove the Timeout function for fading out the loader/spinner, as it is not necessary. i have fixed your code, you can have look at it https://jsfiddle.net/dreamweiver/durtshhz/13/. – dreamweiver Aug 25 '16 at 13:14