Ir para conteúdo

POWERED BY:

Arquivado

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

DSerma

Executar funções JS em páginas carregadas com ajax !

Por , em Javascript

Recommended Posts

DSerma    19

DSerma
Postado

Boa tarde pessoas...

 

Estava eu aqui em minha sala... fazendo o novo site da empresa onde trampo, quando me deparei com um tópico de um de nossos colegas aki do forum, onde o mesmo afirmava: " Já que as funções JavaScripts não são executadas em uma página carregada pelo AJAX... ".

 

Diante disso, a minha cabeça começou a pensar ( o que não acontece muito ) e decidi tentar fazer uma solução para isso... ou seja.. fiz uma função JS dentro da requisição ajax para que de agora em diante possamos rodar nossas funções JavaScript dentro das páginas carregadas pelo AJAX.

 

 

Segue abaixo um exemplo. Simples, mas é um exemplo:

 

Página inicial:

 

<html>
<head>

<!-- Aki é a div que receberá as funções JavaScript -->
<div id = "teste">
</div>
<!-- Termino da Div -->

<!--  Aki chamamos o nosso arquivo .Js que contem as instruções AJAX -->
<script src="ajaxbd.js" type="text/javascript" charset="utf-8"></script>
<!-- Fim -->

</head>
<body>
<!-- Botão que irá chamar a função AJAX -->
<input type="button" value="Gerar" onClick="Geral()" />
<!-- Fim -->

<div id ="txtHint">
</div>
<div id = "resp">
</div>	
</body>
</html>

 

Página que mostrará o resultado (Geral.asp):

 

<html>
<head>

<!-- Cabeçalho ASP para corrigir os caracteres especiais -->
<%
Response.AddHeader "Content-Type", "text/html; charset=iso-8859-1"
response.expires=-1
%>
<!-- Fim -->

<!-- Aki está a resposta da nossa página -->
Teste do DarkDemo para funções JS em páginas carregadas por Ajax...
<br>
<input type="button" onClick="ola()" id = "botao" value = "Click Me">
<input type="button" onClick="Outra()" id = "botao1" value = "Click Me">

<!-- Fim da resposta -->

<!-- E aki, é a função ola(), em JavaScript que será executada na página, quando ela for carregada -->
<script>
function ola()
{
alert('Ola Mundo! Isso é um teste de como fazer suas funções JS funcionarem em páginas trazidas pelo ajax....');
document.getElementById("botao").value = "DarkDemo!";
}

function Outra()
{
document.getElementById("botao").style.width = "500px";
}
</script>
<!-- Fim -->

 

E agora, o arquivo .JS que contém as funções em AJAX (ajaxbd.js):

 

// Faz o envio da página solicitada na função Geral()
var xmlHttp
function Geral()
{ 
xmlHttp=GetXmlHttpObject();
var url="Geral.asp";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
document.getElementById("txtHint").innerHTML="<center><img src='ajax-loader(5).gif'>";
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").innerHTML="";
document.getElementById("resp").innerHTML=xmlHttp.responseText;
// até aki, normal, sem mistérios, mas, a função abaixo é o que vai fazer a "mágica"
// Na linha abaixo chamamos a função newTag(), que é a responsável por isso
newTag();
}
}

// A função MAGICA, heheheh

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 = resp.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 GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  try
	{
	xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	}
  catch (e)
	{
	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
  }
return xmlHttp;
}

E bingo !!!!!... as funções estão funcionando... =D

 

Testado e aprovado no IE e no FF....

 

 

Aguardo comentários, críticas, xingamentos, sugestões, aprimoramentos, entre outros....

 

 

Espero ter ajudado..

 

 

Abraços....

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giancarlo Braga    0

Giancarlo Braga
Postado

Excelente DarkDemo.

Acho que devia ser pinado até, rs.

 

Em breve vou testar com mais detalhes mas andei bisbilhotando o código e adorei o modo como fez.

Aliás, acho que devia ter uma seção com 'artigos Ajax' aqui dentro do fórum Ajax..já que essa técnica tem ficado cada vez mais importante.

 

Abraço,

Giancarlo Braga.

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Ae cara ficou boa.

 

Ha um tempo atrás a galera fez um mutirão pra ver esse lance de carregar scripts via ajax, mas com o tempo os problemas foram se revelando (como o problema do 'parser' parar se tiver uma string com </script> dentro.

 

Muito boa essa idéia de interpretar o javascript só depois dele já estar inserido no documento. Muito boa mesmo.

Ainda não testei, mas verei ela.

 

Realmente ótima a idéia (falta eu testar haeuhe).

 

Só diria pra você ter mais cuidado com as definições de variáveis e com os escopos de variáveis. hehe

 

Té.

 

Aqui também tem mais: http://forum.imasters.com.br/index.php...mp;#entry552492

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alan M. Diniz    1

Alan M. Diniz
Postado

Perfeito DarkDemo!

Estava começando a desenvolver uma função assim, tinha pensado na mesma lógica que você usou, resolvi procurar se alguem já não tinha feito e achei heheh

Muito bom.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Anderson de Sousa Pereira    0

Anderson de Sousa Pereira
Postado

Boa tarde meus caros!

 

Queria saber se vocês conhecem uma maneira de fazer essa mesma função usando Jquery. sou novato nessa área e se alguem puder me ajudar eu agradeço. tipo eu queria saber se tentaram fazer isso usando o Jquery ou se fizeram só com o ajax, porque eu tentei com Jquery aqui e comigo não funcionou!

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Amigo, no caso do jQuery.. tente trabalhar com o método live(), ou bind(), caso esteja chamando os elementos que executam funções JS com AJAX.

 

Se estiver requisitando um script, procure pelo método específico para isso.

http://docs.jquery.com/Ajax/jQuery.getScript

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kurt_RP    0

Kurt_RP
Postado

Show de bola!! :)

A dias eu estava atraz de uma função assim que "realmente" funcionasse.

Bem até ai pelo que testei aqui foi.. meu problema agora ta sendo outro...

 

Imagina que nessa outra pagina que sera carregada pelo ajax exista "2 javascripts", um que fica em cima e outro embaixo.

Como eu farei para enviar esses dois para executar na outra pagina?

Tipo eu ate poderia colocar todas as funções dentro de um mesmo script, problema é que a ultima função tem que ser executada no final.

Eu fiz uma função usando "window.load" 

window.onload = function () {
mas nao funcionou. :(

 

Parece que nem isso o ajax deixa funciona :angry:

 

 

Alguem tem uma luz de como possa fazer para resolver isso?

Ou alguem sabe como fazer para carregar primeiro o html e por ultimo o javascript da segunda pagina?

Compartilhar este post

Link para o post
Compartilhar em outros sites

andreia_sp    1

andreia_sp
Postado

eu estava com o mesmo problema do Kurt mas resolvi da seguinte forma:

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 = resp.getElementsByTagName("script");

// Iniciando a variavel que guardará todos os scripts encontrados

var todosScripts = "";

// Guardando na variavel todos os scripts encontrados

for(i = 0; i < scripts.length; i++)

{

todosScripts += scripts.innerHTML + "\r\n";

}

// Atachando tudo de uma vez só os scripts encontrados

newElement.text = todosScripts;

// Agora, inserimos a nova tag <script> dentro da div na página inicial

conteudo.appendChild(newElement);

}

 

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