Ir para conteúdo

Arquivado

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

André Maretti

Dificuldade com meu inicio no Ajax

Por , em Javascript

Recommended Posts

André Maretti    0

André Maretti
Postado

Ae galera...

 

A um tempo atrás comecei a estudar a técnica do Ajax... mas por questões de trabalho tive q abandonar...

 

mas agora estou de volta tentando dominar o bixinho... rs

 

Pra começar estou criando algo bem simples... o usuário preenche o formulário e ele envia pra outra página q faz a gravação no banco de dados e quando estiver gravado eu dou uma mensagem pro usuário.

 

O exemplo é simples... nem precisaria de Ajax... mas é pra eu ir aprendendo aos poucos....

 

Aqui está o código completo da minha página, e mais abaixo o trecho de código onde o erro acontece:

<?
include 'funcoes.php';
ob_start(); 
session_start();
  
?> 

<html>
<head>
<title>Micro Pinhal - Cadastro - Fase 01</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
	if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
	obj.visibility=v; }
}

function MM_setTextOfLayer(objName,x,newText) { //v4.01
  if ((obj=MM_findObj(objName))!=null) with (obj)
	if (document.layers) {document.write(unescape(newText)); document.close();}
	else innerHTML = unescape(newText);
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
	document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_showHideLayers('LStatus','','hide')">
<div id="LStatus" style="position:absolute; left:515px; top:179px; width:240; height:40; z-index:1; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;"> 
  <p align="center"> </p>
  </div>
<style>
.caixa_texto{
	font-family: Arial;
	font-size: 11px;
	color: #000000;
	border-color: #333 #333333 #333333 #333;
	border-style: solid;
	border-width: 1px;
	font-weight: lighter;
}
.botao{
	font-family: Arial;
	font-size: 11px;
	color: #000000;
	font-weight: normal;
	background-color: #00CC66;
	border: 2px solid #006600;
}

.LStatus_Centro {
	position:absolute;
	left:650px;
	top:151px;
	width:251px;
	height:38px;
	z-index:1;
	background-color: #FF0000;
	visibility: hidden;
	background-position: center;
	vertical-align: middle;
}

.style1 {
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
}
</style>

<!-- ------------------------- INICIOS - FUNÇÃO JAVA SCRIPT ---------------------------------//-->
<script language="JavaScript">
<!--

function envia(){
	//VERIFICA OS CAMPOS OBRIGATÓRIOS
	if(document.forms[0].nome.value == "") {
		alert("Por favor, preencha o campo nome.");
		document.forms[0].nome.focus();
	} else if(document.forms[0].endereco.value == "") {
		alert("Por favor, preencha o campo Endereço.");
		document.forms[0].endereco.focus();
	} else if(document.forms[0].bairro.value == "") {
		alert("Por favor, preencha o campo Bairro.");
	 	document.forms[0].bairro.focus();
	} else if(document.forms[0].cep.value == "") {
		alert("Por favor, preencha o campo CEP.");
	 	document.forms[0].cep.focus();
	} else if(document.forms[0].cidade.value == "") {
		alert("Por favor, preencha o campo Cidade.");
		document.forms[0].cidade.focus();
	} else if(document.forms[0].estado.value == "") {
		alert("Por favor, preencha o campo Estado.");
		document.forms[0].estado.focus();
	} else if(document.forms[0].telefone.value == "") {
		alert("Por favor, preencha o campo Telefone.");
		document.forms[0].telefone.focus();
	} else if(document.forms[0].celular.value == "") {
		alert("Por favor, preencha o campo Celular.");
		document.forms[0].celular.focus();
	} else if(document.forms[0].email.value == "") {
		alert("Por favor, preencha o campo E-Mail.");
		document.forms[0].email.focus();
	} else if(document.forms[0].datanasc.value == "") {
		alert("Por favor, preencha o campo Data de Nascimento.");
		document.forms[0].datanasc.focus();
	} else if(document.forms[0].nacionalidade.value == "") {
		alert("Por favor, preencha o campo Nacionalidade.");
		document.forms[0].nacionalidade.focus();
	} else if(document.forms[0].naturalidade.value == "") {
		alert("Por favor, preencha o campo Naturalidade.");
		document.forms[0].naturalidade.focus();
	} else if(document.forms[0].estado_civil.value == "") {
		alert("Por favor, preencha o campo Estado Civil.");
		document.forms[0].estado_civil.focus();
	} else if(document.forms[0].disponibilidade.value == "") {
		alert("Por favor, preencha o campo Disponibilidade para Funções.");
		document.forms[0].disponibilidade.focus();
	} else if(document.forms[0].salexigido.value == "") {
		alert("Por favor, preencha o campo Salário Exigido.");
		document.forms[0].salexigido.focus();
	} else {
		MM_showHideLayers('LStatus','','show');
		var vnome = document.getElementById('nome').value;	
		var vendereco = document.getElementById('endereco').value;	
		var vbairro= document.getElementById('bairro').value;
		var vcep= document.getElementById('cep').value;
		var vcidade= document.getElementById('cidade').value;	
		var vestado= document.getElementById('estado').value;		
		var vtelefone= document.getElementById('telefone').value;			
		var vcelular= document.getElementById('celular').value;				
		var vemail= document.getElementById('email').value;					
		var vdatanasc= document.getElementById('datanasc').value;					
		var vnacionalidade = document.getElementById('nacionalidade').value;					
		var vnaturalidade = document.getElementById('naturalidade').value;						
		var vestado_civil = document.getElementById('estado_civil').value;							
		var vdisponibilidade = document.getElementById('disponibilidade').value;
		var vsalexigido = document.getElementById('salexigido').value;	
		var vvoltar = document.getElementById('co_voltar').value;	

		var xmlHttp;
		if(window.ActiveXObject){
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		} else if (window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}
	
		xmlHttp.open("GET", "be_gravar_cad01.php?nome="+vnome+"&endereco="+vendereco+"&bairro="+vbairro+"&cep="+vcep+"&cidade="+vcidade+"&estado="+vestado+"&telefone="+vtelefone+"&celular="+vcelular+"&email="+vemail+"&datanasc="+vdatanasc+"&nacionalidade="+vnacionalidade+"&naturalidade="+vnaturalidade+"&estado_civil="+vestado_civil+"&disponibilidade="+vdisponibilidade+"&salexigido="+vsalexigido+"&voltar="+vvoltar, true);
		xmlHttp.onreadystatechange = callback();
		xmlHttp.send(null);

		function callback(){
			if(xmlHttp.readyState == 1){
				LStatus.style.top = document.body.scrollTop;
				LStatus.style.left = (window.screen.availWidth-260);				
				MM_setTextOfLayer('LStatus','','<center><font face="arial" size=2><B>Gravando...<B></font></center>')										
			}

			if(xmlHttp.readyState == 4){
				if(xmlHttp.status == 200){
					alert("Gravado com sucesso!");
				} else if (xmlHttp.status == 404){
					alert("Não encontrado");				
				}
			} // IF readyState == 4		
		}//FUNCTION CALLBACK
		
	} // FECHA IF DA VERIFICAÇÃO DE CAMPOS
}  //FUNÇÃO ENVIA
  
//-->
</script>
<!-- ------------------------- FIM - FUNÇÃO JAVA SCRIPT ---------------------------------//-->

<p align="center"><img src="../imagens/be_banner.jpg" width="780" height="110" align="absmiddle"></p>

<?
//---------------------------------- INÍCIO DA CONEXÃO COM BANCO DE DADOS-----------------------------------------
//conexao com o banco
$conexao = mysql_connect(xxx,'xxx','xxx'); 
//seleciona o banco
$banco = mysql_select_db('micropinhal',$conexao); 
//---------------------------------- FIM DA CONEXÃO COM BANCO DE DADOS-----------------------------------------

?>

  <table width="780" border="0" align="center">
	<tr> 
	  
	<td height="733"> 
	  <p align="left"><font color="#0066FF" size="3" face="Arial Black"> CADASTRANDO - FASE 01</font><br>
	  <font color="#0066FF" size="3" face="Arial Black">Dados Pessoais</font></p>
		<p><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>Todos 
		  os dados deste formulário são de preenchimento obrigatório.</strong></font>
		  <label></label>
		</p>
<?
$voltar = $_GET['id'];
if(($voltar == "voltar") or ($voltar == "alterar")){
   //SE O RESULTADO FOR VOLTAR É PORQUE VEIO DAS TELAS DE CADASTRO.
   //SE O RESULTADO FOR ALTERAR É PORQUE VEIO DA TELA DE ALTERAÇÃO.
   $preenche = 1;
   $sql = mysql_query("SELECT * FROM be_candidatos_online WHERE codigo = '$_SESSION[cod_candidato]'");
   $Valor = mysql_fetch_array($sql); 
} else {
   $preenche = 0;
}
?>		  
		<form action= "be_gravar_cad01.php?id=<? echo($voltar) ?>" method="post">
		<table width="600" border="0" align="center">
		  <tr> 
			<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Nome:</font></td>
			<td>
			<?
			if ($preenche == 1) {
			   $valor_preenche = $Valor["nome"];
			} else {
			   $valor_preenche = "";			
			}
			?>
			<input name="co_voltar" type="hidden" id="co_voltar" value="<? echo($voltar); ?>">
			<input name="nome" type="text" class="caixa_texto" id="nome" value="<? echo("$valor_preenche"); ?>" size="100" maxlength="60"></td>
		  </tr>
		  <tr> 
			<td width="100" height="35"> <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Endereço:</font></p></td>
			<td width="490"> 
			  <?
			if ($preenche == 1) {
			   $valor_preenche = $Valor["endereco"];
			} else {
			   $valor_preenche = "";			
			}
			?>
			<input name="endereco" type="text" class="caixa_texto" id="endereco" value="<? echo("$valor_preenche"); ?>" size="100" maxlength="60">			</td>
		  </tr>
		  <tr> 
			<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Bairro</font></td>
			<td> 
			  <?
			if ($preenche == 1) {
			   $valor_preenche = $Valor["bairro"];
			} else {
			   $valor_preenche = "";			
			}
			?>
			<input name="bairro" type="text" class="caixa_texto" id="bairro" value="<? echo("$valor_preenche"); ?>" size="50" maxlength="50"></td>
		  </tr>
		  <tr> 
			<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">CEP:</font></td>
			<td height="35"> 
			  <?
			if ($preenche == 1) {
			   $valor_preenche = $Valor["cep"];
			} else {
			   $valor_preenche = "13990-000";			
			}
			?>
			<input name="cep" type="text" id="cep" value="<? echo("$valor_preenche"); ?>" size="18" maxlength="9" class="caixa_texto"></td>
		  </tr>
		  <tr> 
			<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Cidade:</font></td>
			<td height="35"> 
			  <?
			if ($preenche == 1) {
			   $valor_preenche = $Valor["cidade"];
			} else {
			   $valor_preenche = "E. S. Pinhal";			
			}
			?>
			<input name="cidade" type="text" id="cidade" value="<? echo("$valor_preenche"); ?>" size="50" maxlength="40" class="caixa_texto"></td>
		  </tr>
		  <tr> 
			<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Estado:</font></td>
			<td height="35"> 
			  <?
			if ($preenche == 1) {
			   $valor_preenche = $Valor["estado"];
			} else {
			   $valor_preenche = "SP";			
			}
			?>
			<input name="estado" type="text" id="estado" value="<? echo("$valor_preenche"); ?>" size="4" maxlength="2" class="caixa_texto"></td>
		  </tr>
		  <tr> 
			<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Telefone:</font></td>
			<td height="35"> 
			  <?
			if ($preenche == 1) {
			   $valor_preenche = $Valor["telefone"];
			} else {
			   $valor_preenche = "";			
			}
			?>
			<input name="telefone" type="text" class="caixa_texto" id="telefone" value="<? echo("$valor_preenche"); ?>" size="18" maxlength="14"></td>
		  </tr>
		  <tr> 
			<td  height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Celular:</font></td>
			<td height="35"> 
			  <?
			if ($preenche == 1) {
			   $valor_preenche = $Valor["celular"];
			} else {
			   $valor_preenche = "";			
			}
			?>
			<input name="celular" type="text" class="caixa_texto" id="celular" value="<? echo("$valor_preenche"); ?>" size="18" maxlength="14"></td>
		  </tr>
		  <tr> 
			<td  height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">E-Mail:</font></td>
			<td height="35"> 
			  <?
			if ($preenche == 1) {
			   $valor_preenche = $Valor["email"];
			} else {
			   $valor_preenche = "";			
			}
			?>
			<input name="email" type="text" class="caixa_texto" id="email" value="<? echo("$valor_preenche"); ?>" size="100" maxlength="50"></td>
		  </tr>
		  <tr> 
			<td  height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Data 
			  de Nascimento:</font></td>
			<td height="35"> 
			  <?
			if ($preenche == 1) {
			   $valor_preenche = conv_data_brasil($Valor["datanasc"]);
			} else {
			   $valor_preenche = "";			
			}
			?>
			  <input name="datanasc" type="text" class="caixa_texto" id="datanasc" value="<? echo("$valor_preenche"); ?>" size="20" maxlength="10"> 
			  <font size="1" face="Verdana, Arial, Helvetica, sans-serif">Ex: 
			27/08/1984</font></td>
		  </tr>
		  <tr> 
			<td  height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Nacionalidade:</font></td>
			<td height="35"> 
			  <?
			if ($preenche == 1) {
			   $valor_preenche = $Valor["nacionalidade"];
			} else {
			   $valor_preenche = "Brasileiro(a)";			
			}
			?>
			<input name="nacionalidade" type="text" id="nacionalidade" value="<? echo("$valor_preenche"); ?>" size="50" maxlength="40" class="caixa_texto"></td>
		  </tr>
		  <tr> 
			<td  height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Natural 
			  de:</font></td>
			<td height="35"> 
			  <?
			if ($preenche == 1) {
			   $valor_preenche = $Valor["naturalidade"];
			} else {
			   $valor_preenche = "E. S. Pinhal";			
			}
			?>
			<input name="naturalidade" type="text" id="naturalidade" value="<? echo("$valor_preenche"); ?>" size="50" maxlength="30" class="caixa_texto"></td>
		  </tr>
		  <tr> 
			<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Estado 
			  Civil :</font></td>
			<td height="35"> 
			  <?
			if ($preenche == 1) {
			   $valor_preenche = $Valor["estado_civil"];
			} else {
			   $valor_preenche = "";			
			}
			?>
			<input name="estado_civil" type="text" class="caixa_texto" id="estado_civil" value="<? echo("$valor_preenche"); ?>" size="50" maxlength="30"></td>
		  </tr>
		  <tr> 
			<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Disponibilidade 
			  para funções:</font></td>
			<td height="35"> 
			  <?
			if ($preenche == 1) {
			   $valor_preenche = $Valor["disponibilidade"];
			} else {
			   $valor_preenche = "";			
			}
			?>
			<input name="disponibilidade" type="text" class="caixa_texto" id="disponibilidade" value="<? echo("$valor_preenche"); ?>" size="100" maxlength="60"></td>
		  </tr>
		  <tr> 
			<td  height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Salário 
			  Exigido:</font></td>
			<td height="35"> 
			  <?
			if ($preenche == 1) {
			   $valor_preenche = $Valor["sal_exigido"];
			} else {
			   $valor_preenche = "";			
			}
			?>
			  <input name="salexigido" type="text" class="caixa_texto" id="salexigido" value="<? echo("$valor_preenche"); ?>" size="50" maxlength="25"></td>
		  </tr>
		</table>
		</form>
		
	  <p align="center"><font color="#0066FF" size="3" face="Arial Black">	 
		   <input type="submit" name="Submit" value="   Gravar   " class="botao" onClick="envia();">			
	
	  </font></p></td>
	</tr>
  </table>

<p> </p>

</body>
</html>

<?
ob_end_flush(); 
?>

O meu problema está aqui:

function callback(){
			if(xmlHttp.readyState == 1){
				LStatus.style.top = document.body.scrollTop;
				LStatus.style.left = (window.screen.availWidth-260);				
				MM_setTextOfLayer('LStatus','','<center><font face="arial" size=2><B>Gravando...<B></font></center>')										
			}

			if(xmlHttp.readyState == 4){
				if(xmlHttp.status == 200){
					alert("Gravado com sucesso!");
				} else if (xmlHttp.status == 404){
					alert("Não encontrado");				
				}
			} // IF readyState == 4		
		}//FUNCTION CALLBACK

Ele faz legal o if(xmlHttp.readyState == 1)....

 

mas quando faz o if(xmlHttp.readyState == 4)... ele dá erro com a mensagem de "Tipos Incompativeis"...

 

Não consigo entender onde errei...

 

se alguém puder me dar um help por favor?!?!!?

Compartilhar este post

Link para o post
Compartilhar em outros sites

klaygomes    0

klaygomes
Postado

(...)

 

xmlHttp.open("GET", "be_gravar_cad01.php?nome="+vnome+"&endereco="+vendereco+"&bairro="+vbairro+"&cep="+vcep+"&cidade="+vcidade+"&estado="+vestado+"&telefone="+vtelefone+"&celular="+vcelular+"&email="+vemail+"&datanasc="+vdatanasc+"&nacionalidade="+vnacionalidade+"&naturalidade="+vnaturalidade+"&estado_civil="+vestado_civil+"&disponibilidade="+vdisponibilidade+"&salexigido="+vsalexigido+"&voltar="+vvoltar, true);

xmlHttp.onreadystatechange = callback();

xmlHttp.send(null);

 

(...)

 

O erro esta ai, ao contrário faça:

 

(...)

 

xmlHttp.open("GET", "be_gravar_cad01.php?nome="+vnome+"&endereco="+vendereco+"&bairro="+vbairro+"&cep="+vcep+"&cidade="+vcidade+"&estado="+vestado+"&telefone="+vtelefone+"&celular="+vcelular+"&email="+vemail+"&datanasc="+vdatanasc+"&nacionalidade="+vnacionalidade+"&naturalidade="+vnaturalidade+"&estado_civil="+vestado_civil+"&disponibilidade="+vdisponibilidade+"&salexigido="+vsalexigido+"&voltar="+vvoltar, true);

xmlHttp.onreadystatechange = callback;

xmlHttp.send(null);

 

(...)

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