jqueryでajax関数を呼び出す前にモーダルウィンドウでスピナーをロードしたい

Question

私はajax関数を使用して電子メールを送信している電子メール送信ボタンをクリックするとスピナーをロードしたいだけです。スピナーを隠す。ここに私のコードです：

マイスピナーロードのdiv

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

のSpinnerクラス

<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> 

私の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); 
     } 
    }); 
}); 

メールが送信されました。誰も私がここでやっている間違いのように私にこれを助けることができますか？

あなたの助けを感謝します！

ありがとうございます。

Answer 1

beforeSendコールバック内にローダーを表示し、errorまたはsuccessコールバックに表示する必要があります。

JSコード：

//hide the spinner by default in css 'display:none' 
$.ajax({ 
    data:... 
    url:.... 
    beforeSend:function() { 
     $('.loader').show(); 
    }, 
    success:function(){ 
     $('.loader').hide(); 
     ..... 
    }, 
    error:function(){ 
     $('.loader').hide(); 
     ..... 
    });