JQuery Mostrar Loading enquanto AJAX carrega.

[FabianoS]

Ola gostaria de saber meu código esta errado, fiz uma requisição com o banco e esta voltando correto os resultado, porém gostaria de mostrar um gif de loading enquanto faz a requisição, porém não esta aparecendo, e pelo que eu vi atualmente com a versão do jquery usa-se always() pra fazer isso ou nao ?

 

$(".style_cliente input").blur(function(){
	var client = $(this).val();
	$.ajax({
		url: 'dados.php',
		method: 'POST',
		data:{nClient:client,client:"pesquisar"}
	}).always(function(){
		$(".teste_gif").css({display:'block'});
	}).done(function(result){
		dados = result.split("/");
		$(".teste_gif").css({display:'none'});
		$(".teste").text(result);
		$(".style_end input").val(dados[0]);
		$(".style_reg input").val(dados[1]);				        
					        
	}).fail(function(result){
		$(".style_moto").html(result);
	});

				
});

 

[DiF]

@Makun Na verdade não.   o always é usado para outros retornos

 

Você pode usar o beforesend.

Tente desta forma:

 

 

$(".style_cliente input").blur(function(){
    
      var client = $(this).val();
      $.ajax({
         url: 'dados.php',
         method: 'POST',
	 data:{nClient:client,client:"pesquisar"},
         beforeSend: function() {
              $(".teste_gif").css({display:'block'});
         }
      }).done(function(result){
                dados = result.split("/");
		$(".teste_gif").css({display:'none'});
		$(".teste").text(result);
		$(".style_end input").val(dados[0]);
		$(".style_reg input").val(dados[1]);	
      }).fail(function(){
               $(".style_moto").html(result);   
      });
});

 

 

 

 

[FabianoS]

@DiF Eu tinha visto o beforesend até tentei usar provavelmente não consegui por erro de sintaxe, estava usando como se fosse uma função por exemplo "beforeSend()", funcionou sim o código , único problema é que não sei se é por ter poucos registros no banco ou por usar o display para ver e esconder, mas esta indo muito rápido não da nem pra ver o resultado.

teria como retardar esse result pelo menos por 1 segundo ?

 

Up: 

Na verdade consegui fazer um delay da seguinte forma, coloca um função no resultado e dando setTimeout(função,500); no caso o código ficou assim.

.done(function(result){
					       function delay(){
					       	 dados = result.split("/");
					        $(".teste_gif").css({display:'none'});
					        $(".teste").text(result);
					        $(".style_moto input").val(dados[0]);
					        $(".style_CPF input").val(dados[1]);
					        $(".style_RG input").val(dados[2]);
					      }
					      setTimeout(delay,500);
					        
					  }).fail(function(result){
					          $(".style_moto").html(result);
					  });

 

 

[Felipe Paz]

@Makun pelo fato de ser local, a chamada é instantânea. o que eu geralmente faço é  criar a div/img que fará o loading manualmente com css para ver como vai ficar ao ser feito a chamada ajax. Depois sim no beforeSend eu dou um prepend dessa classe no body e no complete eu removo essa div criada para o loading.