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 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();
       .....
   });

想在jquery中调用ajax函数之前在模态窗口上加载微调器

1 个答案: