Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Junior_pepis

ajax, loading e resposta por tempo definido

Por , em Javascript

Recommended Posts

Junior_pepis    2

Junior_pepis
Postado

olá pessoal fiz um ajax aqui está tudo funcionando.

ele valida com o jquery.validate, e chama o grava-usuarios.php

que salva no banco e também to exibindo uma div com um gif loading.gif, e escondendo ela depois de alguns segundos quando tenho o retorno do ajax. eu queria exibir uma div de resposta por exemplo 'usuario salvo com sucesso!' por alguns segundos tambem, mas ela exibe junto com efeito de fade do loading. como poderia criar uma condição que ela só exibiria depois que o loading foi oculto?

 

 

/* ajax usuarios do sistema */
 $('#CadastroUsuario').validate({  
           rules: {  
			txtUsuario:{required: true},
			txtSenha:{required: true, minlength: 6},
			txtSenha2:{required: true,equalTo: "#txtSenha"},
			txtEmail:{required: true, email: true},
           },  
           messages: {  
		    txtUsuario:{required: "Digite o seu nome de Usuario"},
			txtSenha:{required: "Digite sua senha", minLength: "Sua senha deve conter, no mínimo, 6 Digitos"},
			txtSenha2:{required: "Repita sua Senha",minLength: "Sua senha deve conter, no mínimo, 6 Digitos"},
			txtEmail:{required: "Digite o seu e-mail para contato",email: "Digite um e-mail válido"}
           },  
           submitHandler: function(form){  
               var dados = $(form).serialize();  

			$('#carrega-ajax').show(); //exibe carregamento ajax

			$.ajax({  
                   type: "POST",  
                   url: "grava-usuarios.php",  
                   data: dados,  
                   success: function( data ){  

					document.getElementById('CadastroUsuario').reset() //limpa formulario

					$('#carrega-ajax').fadeToggle(3000).hide(3000);//esconde carregamento

					$('#resposta').show('fast',function() { //imprime a resposta
							$('#resposta').empty().html(data);
					}); 
					$('#resposta').fadeToggle(3000).hide(20000); // esconde a resposta

                   }  
               });  

               return false;  
           }  
       });

Compartilhar este post

Link para o post
Compartilhar em outros sites

Preceptor    3

Preceptor
Postado

com jquery use a funcao delay

 

 


<!DOCTYPE html>
<html>
<head>
 <style>
div { position: absolute; width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; left: 0;}
.second { background-color: #33f; left: 80px;}
</style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>

<script>
   $("button").click(function() {
     $("div.first").slideUp(300).delay(800).fadeIn(400);
     $("div.second").slideUp(300).fadeIn(400);
   });
</script>

</body>
</html>

 

 

http://api.jquery.com/delay/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito