Ajax executando código javascript

rdgomes · Dezembro 14, 2008

Oi,

Estou precisando de ajuda.

Num trabalho que estou fazendo em PHP+Javascript tenho uma página que apresenta uma estrutura em árvore com dados recolhidos de um banco de dados. Para que os dados sejam apresentados em árvore utilizo um script com uma série de funções javascript que descobri numa pesquizada na net. Consegui colocar a estrutura em árvore correctamente, mas tenho um problema. Os dados que são necessários para a estrutura são muitos e eu não queria que a página ficasse 'pendurada' até que carregasse os dados. Queria que aparecesse a página e, depois os dados seriam carregados através de Ajax.

E ai surgem os problemas. Usando ajax as funções Javascript não funcionam, nem a formatação CSS.

Tentei usar a função ExtraiScript (desenvolvida por Skywalker.to, Micox e Pita) mas sem sucesso.

Uso o seguinte código:

tabelas.php

<script type="text/javascript" src="grelha.js"></script>
<script type="text/javascript" src="script_arvore.js"></script>

...
<div class="dtree" id="dtree1">
</div>
...
<script language="JavaScript" type="text/javascript">		
teste_ajax_inicio();
</script>

grelha.js

function fc_ajax() {
...
}

function teste_ajax_inicio() {
		
	  //verifica se o browser tem suporte a ajax
	  ajax=fc_ajax();
	  
	  //se tiver suporte ajax
	  if(ajax) {	   
		 ajax.open("GET", "tabelas_geog.php", true);
		 ajax.onreadystatechange = function() {
			//enquanto estiver processando...emite a msg de carregando
			if(ajax.readyState == 1) {
			   document.getElementById("dtree1").innerHTML = "Carregando...!";   
			}
			if(ajax.readyState == 4 ) { 
			   //document.getElementById("dtree1").innerHTML = ajax.responseText;
			   var texto=ajax.responseText;
				document.getElementById("dtree1").innerHTML = texto;
				ExtraiScript(texto);
				
			}
		 }//end ajax.onreadystatechange
		 ajax.send(null);
	  }//end if ajax
}

function ExtraiScript(texto){
//desenvolvido por Skywalker.to, Micox e Pita.
...
}

tabelas_geog.php

//PHP+Javascript
//Script onde vou buscar os dados ao BD
//Contém funções Javascript

Já tentei usar xml para recolher os dados e as funções javascript estariam em teste_ajax_inicio(), mas sem sucesso.

Coloquei tudo na página principal - tabelas.php, mas não deu.

Desculpem o tamanho do post, mas não consigo descrever o problema em menos linhas.

Agradecia ajuda.

Valeu

Buongiorno · Dezembro 15, 2008

Olá amigo.

É dificil dar uma contribuição mais relevante pois não temos uma visão global do seu problema mas, o seu

caminho é esse aí mesmo: ajax com respostas em xml. Não se esqueça que a partir da função, que é responsável

por tratar o retorno das requisições ajax, você pode executar o quê desejar (ou o quê a imaginação limitar),

você poder chamar outras funções, passar conteúdos de variáveis, trocar conteúdos HTML dinamicamente etc.

Dê uma olhada no código abaixo, talvez lhe sirva de norte.

//arquivo teste.php

<span style="background-color:rgb(235,235,235); color:#333333; font-family:sans-serif;">
e-mail:  <input type="text" value="" id="campo01">
Senha:  <input type="text" value="" id="campo02">
  
<input type="button" value="Entrar" onclick="entrar()">
</span>
<br><span style="font-size:11px; color:#333333; font-family:sans-serif;">
(Para testar use email =  teste@teste.com e senha = 1234)
</span>

<script language="JavaScript1.2">

function entrar()
{
email = document.getElementById('campo01').value.replace(/^\s+|\s+$/g,"");
//Atribui um valor à variável email já retirando-lhe os espaços iniciais e finais "Função Trim"
document.getElementById('campo01').value=email;
//Reescreve o valor na caixa de texto
senha = document.getElementById('campo02').value.replace(/^\s+|\s+$/g,"");
//Atribui um valor à variável senha já retirando-lhe os espaços iniciais e finais "Função Trim"
document.getElementById('campo02').value=senha;
//Reescreve o valor na caixa de texto
if(email == "" || senha == ""){ alert("Dados incorretos."); return false;}
//Antes de fazer a consulta via ajax faça uma higiênização dos dados tal como verificar se é um endereço de email
// válido etc.
//de modo a poupar trabalho para o servidor já que você poderá fazê-lo aqui.
ConsultaAjax(email,senha);
//alert(email +'\n'+senha); /*para teste*/
}

var xmlHttp;
function GetXmlHttpObject()
{
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

function ConsultaAjax(email,senha)
{

xmlHttp = GetXmlHttpObject(); //Aqui "iniciamos o ajax" de acordo com o navegador do cliente
if (xmlHttp==null){alert ("O seu navegador não suporta AJAX!");return;}
url="consulta.php";// Página (URL) que irá receber os dados e retornar a resposta
StrData = "email="+email+"&senha="+senha;//Variáveis e seus respectivos valores quase igual ao método GET 
//a não pelo fato de NÂO colocarmos o ? sinal de interrogação antes da primeira variável
xmlHttp.open("POST",url,true);//Aqui informamos o método e a URL
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");//UTF-8 é o padrão
// se tiver problemas com acentuação dos caracteres em português adicione:  $_POST = array_map(utf8_decode, $_POST);  na página php	  
xmlHttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate"); 
xmlHttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0"); 
xmlHttp.setRequestHeader("Pragma", "no-cache"); 
xmlHttp.setRequestHeader('Content-length', StrData.length );
xmlHttp.send(StrData);//envio dos dados
xmlHttp.onreadystatechange = AjaxResult;//Função responsável por tratar os dados oriundos do servidor
//note que ao especificar a função não colocamos os parênteses.
}

function AjaxResult()
{
if (xmlHttp.readyState==4)//Resposta do servidor OK
{
if (xmlHttp.status==200)//Processo completado
{
// use xmlHttp.responseText para resposta em texto comum
//ou xmlHttp.responseXML para resposta em xml
//não se esqueça de que isto tem que estar corretamente configurado na "página alvo",
//no presente caso a página "consulta.php"

/* -------- Trabalhando com resposta em xml ----------------------

A página consulta.php está preparada para gerar um documento
xml cujo conteúdo tem a seguinte forma:

  <?xml version="1.0" encoding="ISO-8859-15" ?> 
  <resultado>
  <email>0</email> 
  <senha>0</senha> 
  </resultado>
  -------------------------------------------------------------------------------*/
  
//Os resultados podem ser obtidos assim
RX = xmlHttp.responseXML;
emailstatus = RX.getElementsByTagName('email')[0].childNodes[0].nodeValue;
senhastatus = RX.getElementsByTagName('senha')[0].childNodes[0].nodeValue;
//ou assim
//emailstatus = RX.getElementsByTagName('resultado')[0].childNodes[0].childNodes[0].nodeValue;
//senhastatus = RX.getElementsByTagName('resultado')[0].childNodes[1].childNodes[0].nodeValue;
if (emailstatus == 0) {alert("Usuário inexistente."); return false;}
if (senhastatus == 0)
{
if(confirm('Senha inválida \n\n Deseja utilizar o console de recuperação de senha')==false)
{
return false;
} else {window.location.replace('recupera_senha.php'); return true;}
}
if (emailstatus == 1 && senhastatus == 1)
{
alert("Bem-vindo. Você será redirecionado em um instante");
window.location.replace('index.php');
}
//alert(emailstatus+'\n'+senhastatus); /*para teste*/
}else{alert('Houve um problema com sua requisição.');}
}
}
</script>




//Esta é a página consulta.php


<?php
/* Não deixa o browser armazenar a página no cache para evitar problemas com conteúdo dinâmico */
header("Expires: Wed, 21 Dec 1983 09:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s ") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0″, false");
header("Pragma: no-cache");
// Quando estiver usando texto ou html use o cabeçalho abaixo
// header("Content-Type: text/html;  charset=ISO-8859-1",true);
//Quando estiver usando XML use este cabeçalho
header( "content-type: application/xml; charset=ISO-8859-15" );
//Decodificar todas as variáveis $_POST de uma só vez, utilizando o mapeamento de array: 
//Para resolver problemas com acentuação dos caracteres em português
//O padrão é o ajax enviar os caracteres codificados em UTF8 e aqui os convertemos para devolvê-los em ISO-8859-15
$_POST = array_map(utf8_decode, $_POST);


//Aqui deverá vir as consultas ao banco de dados onde estão cadastrados usuário e senhas
/*  *******************  IMPORTANTE  *********************************
	Não esqueça de se precaver contra SQL Injection e outras coisas mais...
********************************************************************* */


$x = 0;
$y = 0;
//Mas só pra testar utilizaremos isto:
if($_POST["email"]=="teste@teste.com") $x = 1; else $x = 0;
if($_POST["senha"]== "1234" ) $y = 1; else $y = 0;
if($x == 1 && $y ==1)
{session_start(); $_SESSION['UsuarioLogado'] == "va_em_frente";
//Estando tudo ok gravamos uma variável na seção para que outra página possa acessá-la
//e verificar se o usuário está logado
}


//Enviando a resposta via XML

//Criando um documento XML
$xml = new DOMDocument( "1.0", "ISO-8859-15" );
//Criando alguns elementos do documento
$xml_elementopai = $xml->createElement( "resultado" );
$xml_elementofilhoum = $xml->createElement( "email", "$x" );
$xml_elementofilhodois = $xml->createElement( "senha", "$y" );
//Atribuindo os elementos filhos ao elemento pai
$xml_elementopai->appendChild($xml_elementofilhoum);
$xml_elementopai->appendChild($xml_elementofilhodois);
//Atribuindo o elemento pai ao documento XML
$xml->appendChild($xml_elementopai);
//"Mostrando" o resultado.
print $xml->saveXML();

?>

Até mais.

rdgomes · Dezembro 16, 2008

Obrigado pela resposta, mas não me expliquei bem.

Ando desorientado com isto, já tentei de tudo e não consigo.

O que eu quero é colocar numa div, na página inicial conteúdo que ficará numa estrutura em árvore.

Do género:

<script type="text/javascript">
		<!--

		e = new dTree('e');

		e.add(0,-1,'');
		e.add(1,0,'Menu1','example01.html');
		e.add(2,1,'submenu1','sub01.html');

		document.write(e);

		//-->

	</script>

Mas esses dados devem ser carregados através de um banco de dados, usando php e mysql, ficando algo assim:

<script type="text/javascript">
		<!--

		e = new dTree('e');

		e.add(0,-1,'');

				<?php
				$sql=...
				$result=mysql_query(...)
				while ($row = pg_fetch_row($result))
			   {
					  echo "e.add($row[0], row[1], $row[2]', $row[3]);";
				} 

		document.write(e);

		//-->

	</script>

Até aqui tudo bem, mas como são muitos dados eu queria que os dados fossem carregados depois da pagina, usando ajax.

O problema é que as funções javascript usadas para a representação em árvore não são executadas.

Além me pode ajudar?

Origado

beluzeus · Dezembro 16, 2008

Estranhamente tive o mesmo problema hoje.

Preciso criar uma arvore que utilizo javascript para a criação, dentro de um arquivo que abro dentro de uma div utilizando AJAX, porém tudo do arquivo abre, menos a arvore.

Se alguem tiver uma solução...

Oi,

Estou precisando de ajuda.

Num trabalho que estou fazendo em PHP+Javascript tenho uma página que apresenta uma estrutura em árvore com dados recolhidos de um banco de dados. Para que os dados sejam apresentados em árvore utilizo um script com uma série de funções javascript que descobri numa pesquizada na net. Consegui colocar a estrutura em árvore correctamente, mas tenho um problema. Os dados que são necessários para a estrutura são muitos e eu não queria que a página ficasse 'pendurada' até que carregasse os dados. Queria que aparecesse a página e, depois os dados seriam carregados através de Ajax.

E ai surgem os problemas. Usando ajax as funções Javascript não funcionam, nem a formatação CSS.

Tentei usar a função ExtraiScript (desenvolvida por Skywalker.to, Micox e Pita) mas sem sucesso.

Uso o seguinte código:

tabelas.php
<script type="text/javascript" src="grelha.js"></script>
<script type="text/javascript" src="script_arvore.js"></script>

...
<div class="dtree" id="dtree1">
</div>
...
<script language="JavaScript" type="text/javascript">		
teste_ajax_inicio();
</script>
grelha.js
function fc_ajax() {
...
}

function teste_ajax_inicio() {
		
	  //verifica se o browser tem suporte a ajax
	  ajax=fc_ajax();
	  
	  //se tiver suporte ajax
	  if(ajax) {	   
		 ajax.open("GET", "tabelas_geog.php", true);
		 ajax.onreadystatechange = function() {
			//enquanto estiver processando...emite a msg de carregando
			if(ajax.readyState == 1) {
			   document.getElementById("dtree1").innerHTML = "Carregando...!";   
			}
			if(ajax.readyState == 4 ) { 
			   //document.getElementById("dtree1").innerHTML = ajax.responseText;
			   var texto=ajax.responseText;
				document.getElementById("dtree1").innerHTML = texto;
				ExtraiScript(texto);
				
			}
		 }//end ajax.onreadystatechange
		 ajax.send(null);
	  }//end if ajax
}

function ExtraiScript(texto){
//desenvolvido por Skywalker.to, Micox e Pita.
...
}
tabelas_geog.php
//PHP+Javascript
//Script onde vou buscar os dados ao BD
//Contém funções Javascript
Já tentei usar xml para recolher os dados e as funções javascript estariam em teste_ajax_inicio(), mas sem sucesso.

Coloquei tudo na página principal - tabelas.php, mas não deu.

Desculpem o tamanho do post, mas não consigo descrever o problema em menos linhas.

Agradecia ajuda.

Valeu

brunocampos_ · Dezembro 16, 2008

É um problema parecido com este?

http://forum.imasters.com.br/index.php?showtopic=319224

rdgomes · Dezembro 16, 2008

Pelo que percebi, o problema está no document.write. Usando ajax não funciona. Alguém sabe como posso contornar o problema?

Cumps

brunocampos_ · Dezembro 17, 2008

Você pode alterar o document.write? Uma maneira seria criar um div, e setar o innerHTML dele.

rdgomes · Dezembro 17, 2008

brunocampos_, muito obrigado. Consegui resolver.

Para recolher os dados usei um xml, e depois fiz algo assim:

d = new dTree('d');

obj=ajax.responseXML;

var dataArray   = obj.getElementsByTagName("elemento");

 if(dataArray.length > 0) {
		 //percorre o arquivo XML paara extrair os dados
		 for(var i = 0; i < dataArray.length; i++) {
			var item = dataArray[i];
			//contéudo dos campos no arquivo XML
			var id	=  item.getElementsByTagName("id")[0].firstChild.nodeValue;
			var nome =  item.getElementsByTagName("nome")[0].firstChild.nodeValue;
			var id_ant	=  item.getElementsByTagName("ant")[0].firstChild.nodeValue;
						
						d.add(id,0,nome);
}
document.getElementById("registo_ajax").innerHTML = d

Arquivado

Ajax executando código javascript

Recommended Posts

rdgomes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buongiorno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdgomes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

beluzeus 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunocampos_ 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdgomes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunocampos_ 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdgomes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante