[Resolvido] Executar JS com AJAX

Quati Maldito · Julho 1, 2009

Olá!

Pessoal, vi aqui no forum, um post do Darkdemo, sobre este assunto, segue link : http://forum.imasters.com.br/index.php?showtopic=264642

A situação é a seguinte, um formulário de cadastro, onde desejo verificar se o email já esta no BD.

Usando a solução do Darkdemo, consegui dar um "alert" informando q o email já está cadastrado.

O problema é que com isso, preciso parar o envio do form, pois e o email está cadastrado, aviso o usuário e foco no campo.

Os codigos...

Página principal:

<HTML>
<HEAD>

<script>


  function cadastra_cliente()
  {

  
 VerificaEmail();
 
 //var email_cadastrado = document.getElementById('email_cadastrado').value;
 //var email_cadastrado = document.cad_cliente.email_cadastrado.value;
 //alert("email_cadastrado : " + email_cadastrado)
 //seila();

 
	document.cad_cliente.submit();
	
	
  }


function openAjax() { 
var Ajax; 
try {Ajax = new XMLHttpRequest(); // XMLHttpRequest para browsers mais populares, como: Firefox, Safari, dentre outros. 
}catch(ee) { 
try {Ajax = new ActiveXObject("Msxml2.XMLHTTP"); // Para o IE da MS 
}catch(e) { 
try {Ajax = new ActiveXObject("Microsoft.XMLHTTP"); // Para o IE da MS 
}catch(e) {Ajax = false; 
} 
} 
} 
return Ajax; 
} 

// parte do codigo do darkdemo
function newTag() 
{	
	// Pegando a div que recebrá o JavaScript
	var conteudo = document.getElementById("teste");
	
	// Declarando a criação de uma nova tag <script>
	var newElement = document.createElement("script");
	
	// Pegando os valores das Tags <script> que estão na página carregada pelo AJAX
	var scripts = ResultadoEmail.getElementsByTagName("script");
		
	// Aki, vamos inserir o conteúdo da tag <script> que pegamos na linha acima	
		for(i = 0; i < scripts.length; i++)
	   {
			newElement.text = scripts[i].innerHTML;
	   }
	   
	   // Agora, inserimos a nova tag <script> dentro da div na página inicial
	   conteudo.appendChild(newElement);
}



function VerificaEmail() { 

 if(document.getElementById) { // Para os browsers complacentes com o DOM W3C. 

  var exibeResultadoEmail = document.getElementById("ResultadoEmail"); // div que exibirá o resultado. 
  var email = document.getElementById('email').value;
  var Ajax = openAjax(); // Inicia o Ajax. 
  var pagina = "verifica_email.asp?email="+email;
  Ajax.open("post",pagina, true); // fazendo a requisição 
  Ajax.onreadystatechange = function() 
  { 
	if(Ajax.readyState == 1) { // Quando estiver carregando, exibe: carregando... 
	 exibeResultadoEmail.innerHTML = "<div align='center'><strong>Verificando email...</strong></div>"; 
	} 
	if(Ajax.readyState == 4) { // Quando estiver tudo pronto. 
	 if(Ajax.status == 200) { 
	  var resultado1 = Ajax.responseText; // Coloca o retornado pelo Ajax nessa variável 
	  //alert(resultado)
	  resultado1 = resultado1.replace(/\+/g," "); // Resolve o problema dos acentos (saiba mais aqui: http://www.plugsites.net/leandro/?p=4) 
	  resultado1 = unescape(resultado1); // Resolve o problema dos acentos 
	  exibeResultadoEmail.innerHTML = resultado1; 
	  newTag();
	 } 
	 else 
	 { 
	  //alert(resultado1)
	  exibeResultadoEmail.innerHTML = "Erro: ."; 
	 } 
	} 
  } 
  //Ajax.send(null); // submete 
  Ajax.send(''); // submete 

 } 
 else
 {
  alert("teste")
 }
} 

</script>

<div id="teste"></div>
</HEAD>

				<form action="altera_cliente.asp" method="post" name="cad_cliente">
				 

				  <table width="571" border="0" cellpadding="2" cellspacing="0">
								   
				  <tr id="linha_21">
					<td height="20">
							<span class="textos_infos"><b>
			 *Email:</b></span>
					</td>
				  </tr>
				  <tr id="linha_22" valign="top">
					<td height="20">
							<input maxlength="50" size="40" name="email" id="email" value="">
					</td>
				  </tr>
				  <tr id="linha_24" valign="top">
					<td height="20">
											<div id="ResultadoEmail"></div>
		   <input TYPE="button" value="Verificar" onclick="cadastra_cliente()"></td>
				  </tr>
			</table>

				</form>

</BODY>
</HTML>

Página que faz a verificação ajax do email:

<% 

user_id = request("email") 

If (user_id <> "") Then 

Set RS_Usuarios = Server.CreateObject("ADODB.Recordset") 
Set RS_Usuarios.ActiveConnection = Conexao 
RS_Usuarios.CursorLocation = 3 
RS_Usuarios.CursorType = 0 
RS_Usuarios.LockType = 1 

RS_Usuarios.Open "SELECT user_id,  email FROM Usuarios WHERE user_id ='" & user_id & "'", Conexao 

If NOT RS_Usuarios.Eof Then 
%> 
<input type="hidden" name="email_cadastrado" id="email_cadastrado" value=""> 
<% 
End If 

RS_Usuarios.Close 
Set RS_Usuarios = Nothing 

End If 

%> 
<script> 
seila(); 
function seila() 
{ 

email_cadastrado = document.getElementById('email_cadastrado').value; 

if (email_cadastrado == '') 
{ 
   alert("O email informado já está cadastrado!") 
   document.cad_cliente.email.focus(); 
   return false; 
} 
} 

</script>

Funciona a verificação, se o email existe da a msg, e se naum existe continua.., o problema é quando existe o email..

Não manjo muito do negócio, acho que devem perceber pelo código...

O lance está funcionando bem até a parte onde mostra a msg informando q o email existe, mas naum para o envio do form

Não sei o que fazer, alguém pode me ajudar, please?

Obrigado!

Quati Maldito · Julho 2, 2009

Bom, vou responder a mim mesmo, já que ninguém "pode" ajudar.

Segue abaixo os códigos:

Página principal:

<HTML>
<HEAD>

<script>



function openAjax() { 
var Ajax; 
try {Ajax = new XMLHttpRequest(); // XMLHttpRequest para browsers mais populares, como: Firefox, Safari, dentre outros. 
}catch(ee) { 
try {Ajax = new ActiveXObject("Msxml2.XMLHTTP"); // Para o IE da MS 
}catch(e) { 
try {Ajax = new ActiveXObject("Microsoft.XMLHTTP"); // Para o IE da MS 
}catch(e) {Ajax = false; 
} 
} 
} 
return Ajax; 
} 

// parte do codigo do darkdemo
function newTag() 
{	
	// Pegando a div que recebrá o JavaScript
	var conteudo = document.getElementById("teste");
	
	// Declarando a criação de uma nova tag <script>
	var newElement = document.createElement("script");
	
	// Pegando os valores das Tags <script> que estão na página carregada pelo AJAX
	var scripts = ResultadoEmail.getElementsByTagName("script");
		
	// Aki, vamos inserir o conteúdo da tag <script> que pegamos na linha acima	
		for(i = 0; i < scripts.length; i++)
	   {
			newElement.text = scripts[i].innerHTML;
	   }
	   
	   // Agora, inserimos a nova tag <script> dentro da div na página inicial
	   conteudo.appendChild(newElement);
}



function VerificaEmail() { 

if(document.getElementById) { // Para os browsers complacentes com o DOM W3C. 

  var exibeResultadoEmail = document.getElementById("ResultadoEmail"); // div que exibirá o resultado. 
  var email = document.getElementById('email').value;
  var Ajax = openAjax(); // Inicia o Ajax. 
  var pagina = "verifica_email.asp?email="+email;
  Ajax.open("post",pagina, true); // fazendo a requisição 
  Ajax.onreadystatechange = function() 
  { 
	if(Ajax.readyState == 1) { // Quando estiver carregando, exibe: carregando... 
	 exibeResultadoEmail.innerHTML = "<div align='center'><strong>Verificando email...</strong></div>"; 
	} 
	if(Ajax.readyState == 4) { // Quando estiver tudo pronto. 
	 if(Ajax.status == 200) { 
	  var resultado1 = Ajax.responseText; // Coloca o retornado pelo Ajax nessa variável 
	  //alert(resultado)
	  resultado1 = resultado1.replace(/\+/g," "); // Resolve o problema dos acentos (saiba mais aqui: http://www.plugsites.net/leandro/?p=4) 
	  resultado1 = unescape(resultado1); // Resolve o problema dos acentos 
	  exibeResultadoEmail.innerHTML = resultado1; 
	  newTag();
	 } 
	 else 
	 { 
	  //alert(resultado1)
	  exibeResultadoEmail.innerHTML = "Erro: ."; 
	 } 
	} 
  } 
  //Ajax.send(null); // submete 
  Ajax.send(''); // submete 

} 
else
{
  alert("teste")
}
} 

</script>

<div id="teste"></div>
</HEAD>

				<form action="altera_cliente.asp" method="post" name="cad_cliente">
				 

				  <table width="571" border="0" cellpadding="2" cellspacing="0">
								   
				  <tr id="linha_21">
					<td height="20">
							<span class="textos_infos"><b>
			 *Email:</b></span>
					</td>
				  </tr>
				  <tr id="linha_22" valign="top">
					<td height="20">
							<input maxlength="50" size="40" name="email" id="email" value="">
					</td>
				  </tr>
				  <tr id="linha_24" valign="top">
					<td height="20">
											<div id="ResultadoEmail"></div>
		   <input TYPE="button" value="Verificar" onclick="VerificaEmail()"></td>
				  </tr>
			</table>

				</form>

</BODY>
</HTML>

Básicamente tirei o submit dessa página, e deixei para fazer o mesmo na página de verificação do ajax.

Página verifica email ajax:

<%

	user_id = request("email")

	If (user_id <> "") Then
		' Abre conexao com banco de dados
		Call abre_conexao(conexao)
	
		Set RS_Usuarios = Server.CreateObject("ADODB.Recordset")
		Set RS_Usuarios.ActiveConnection = Conexao
		RS_Usuarios.CursorLocation = 3
		RS_Usuarios.CursorType = 0
		RS_Usuarios.LockType =  1


		RS_Usuarios.Open "SELECT user_id FROM Usuarios WHERE user_id ='" & user_id & "'", Conexao
		If NOT RS_Usuarios.Eof Then
 		user_id2 = user_id
 		msg = "Email " & user_id & " já cadastrado!"	
	  else
 		msg = ""

 		user_id2 = ""
		End If

		RS_Usuarios.Close 
		Set RS_Usuarios = Nothing

	End If
	
	
response.write msg
%>

<input TYPE="hidden" name="email_cadastrado2" id="email_cadastrado2" value="<%=user_id2%>"> 
<script>
seila();
function seila()
{
	email_cadastrado = document.getElementById('email_cadastrado2').value;
	
	if (email_cadastrado != '')
	{
						alert("O email informado já está cadastrado!")
					  document.cad_cliente.email.focus();
					  return false;		
	}
	else
	{
		//alert("Robusto!")
		document.cad_cliente.submit();
	}
}	

</script>

Tem um response.write na página ajax, que se tirar naum funciona.

Não sei explicar p....... nenhuma, mas funcionou..

Se alguém se habilitar a explicar pq só funciona com o response.write no código, ficarei feliz!

Obrigado a todos.

Entrar

Arquivado

[Resolvido] Executar JS com AJAX

Recommended Posts

Quati Maldito 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Quati Maldito 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante