Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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><!-- 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><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>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()document.getElementById("txtHint").innerHTML="";
document.getElementById("resp").innerHTML=xmlHttp.responseText;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() xmlHttp=new XMLHttpRequest();
} xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}Testado e aprovado no IE e no FF....
Aguardo comentários, críticas, xingamentos, sugestões, aprimoramentos, entre outros....
Espero ter ajudado..
Abraços....
Carregando comentários...