(Resolvido) codigo javascript não executa vindo por responseText

[Danilo Moraes]

Olá pessoal. Estou com uma duvida:

Estou desenvolvendo um sistema em ajax onde ele faz requests a paginas no servidor. As paginas estao como .php para que eu possa setar os headers e colocar apenas o conteudo, sem ter que setar as tags body, head e tals.

Na pagina index, onde estao setadas as funcoes de ajax e tals, eu tenho o div conteudo onde tudo e colocado quando vem do sevidor. Tenho uma pagina que esta vindo do servidor, que quando eu clico em alguns links dela, eu gostaria que mostrace alguns divs e esconde outros. Detalhe: os divs estao na propria pagina .php que vem do servidor. Mas o problema, é que o codigo javascript que esta nessas paginas não executa. um exemplo dessa pagina:

<?php header("Content-Type: text/html; charset=ISO-8859-1",true) ?>
<script type="text/javascript">
            function showOnOff() {
                alert('teste')
            }    
        </script>
<div id="submenu">
    <ul>
        <li class="inativo"><a href="java script: showOnOff()">Pesquisa Básicas</a></li>
        <li class="inativo"><a href="#pesquisaavancada">Pesquisa Avançada</a></li>
        <li class="inativo"><a href="#tiposdeleis">Tipos de Leis</a></li>
    </ul>
</div>

<div id="pesquisabasica" class="hidden">
    <p class="label"> Pesquisar:</p>
    <input type="text" id="pesquisa" class="text" size="30" />
</div>

<div id="pesquisaavancada" class="hidden">

</div>

<div id="tiposdeleis" class="hidden">
    
</div>

<div id="submitreset">
    <input type="button" id="resetbasica" class="botao" value="Redefinir" />
    <input type="submit" id="submit" class="botao" value="Pesquisar" />
</div>

quando eu clico no primeiro link, no console de erros fo FF aparece que a funcao showOnOff não esta definida. A solucao que achei, foi definir a funcao na propria pagina index. Mas alguém saberia me dizer porque que retorna o erro de funcao indefinida se ela esta setada ali?

[KaKarotto]

Só com esse código não da pra saber do problema não...como está fazendo o ajax? tá usando alguma biblioteca como jQuery ?

Tem como postar o link da página funfando ?

Tá estranho isso aí...

[Danilo Moraes]

Olha, eu não achei nenhum tutorial ensinando como resolver o meu problema, mas depois de inumeros testes, descobri uma maneira de resolver meu problema.

Primeiro vou explicar melhor o problema.

Eu estava trasendo do servidor, um codigo HTML, ou melhor dizendo, uma pagina. A pagina que eu estava trazendo, era essa que mostrei ali encima. Essa pagina iria ser insirida dentro do div conteudo na pagina onde estava o codigo ajax. Ate ai normal, todo bom tutorial de ajax ensina isso bem detalhadamente. O meu problema estava que eu não conseguia executar funcoes que eram criadas nas paginas que vinham do servidor. Por exemplo: Essa pagina que mostrei no post anterior, eu criava uma funcao nas tags <script></script>, a funcao showOnOff() que chama a funcao alert passando como parametro a string "teste".

Agora, reparem nesse link:

<li class="inativo"><a href="java script: showOnOff()">Pesquisa Básicas</a></li>

não tem nada de mais nele, afinal ele apenas esta chamando a funcao showOnOff(). E se eu chamar essa pagina no navegador, quando eu clicar no link vai aparecer o alert mostrando a mensagem: teste. Agora, se eu chamar essa pagina pelo AJAX usando a propriedade responseText e inserir essa pagina, todo o conteudo HTML dela sera mostrado normalmente, mas a funcao showOnOff(), não vai funcionar. Se eu clicar no link, vai me retornar o erro de que a funcao showOnOff() não foi definida. Depois de horas pensando e procurando uma solucao na internet, que por sinal não adiantou nada, tive a ideia de fazer alguns testes. Primeiro pensei que a funcao não estava sendo criada, porque ela não estava registrada no indice que o DOM cria de todos os elementos. então quando a pagina vinha do servidor, eu selecionava a tag <script> e dava um:

document.body.appendChild(script)

e nada adiantava. Depois pensei que foce porque o codigo javascript que vinha do servidor, era interpretado como um TextNode e não como um text/javascript (o que não tem nada a ver ^^) então fazendo alguns teste, descobri que ate os codigos javascript que estao na pagina, são todos do tipo TextNode. Quando eu estava quase desistindo, me veio na mente a seguinte ideia: Se o erro esta disendo que a funcao não foi definida, então quer dizer que o interpretador javascript do browser não leu aquele trecho de código e isso faz sentido já que no AJAX, a propriedade responseText, recebe o conteudo apenas como texto, passando (no meu caso) para a pagina onde o browser iria varrer o novo conteudo inserido e atualizar o indice do DOM. então qual era a solucao? Fazer com que o interpretador javascript do browser le-se o seguinte trecho:

function showOnOff() {
                alert('teste')
            }

Descoberto o problema, agora apenas temos que achar a maneira de solucionalo! ^^ Bom, eu já sabia que no PHP tem uma funcao chamada eval(),que executa os codigos PHP como string. Exemplo: 2+2 = 4; //simples, uma operacao de matematica "2"+"2" = "22";//aki eu estou concatenando duas strings "2+2" = "2+2"//a string "2+2" é apenas uma string :P já usando a funcao eval() ficaria assim: eval("2+2") //retorna 4, ou seja, executou o codigo como uma string. então procurei pela net pra ver se tinha uma funcao similar para javascript e para minha surpresa, a funcao se chamava eval mesmo ^^ Para que você possa intender melhor o poder da funcao(melhor chamar de metodo, já que metodo em javascript e toda funcao predefinida pela linguagem, nativa...) eval(), teste o seguinte codigo:

<script type="text/javascript">
    eval("function showOnOff(){alert("teste")} showOnOff()")
</script>

Nesse trecho de codigo, criamos a funcao showOnOff e depois camamos ela, tudo como uma string. E o que acontece se tu rodar esse codigo? Um alert com a mensagem Teste vai aparecer. então o meu problema estava resolvido, so tinha que passar a funcao eval no conteudo dentro da tag script vinda do servidor. O codigo final ficou mais ou menos assim:

//coloque aki toda a parte de ajax. Vou mostrar apenas a parte de receber os dados do servidor
var conteudo = document.GetElementById("conteudo");//pego o elemento div onde a resposta do servidor sera inserida
conteudo.innerHTML = XMLHttpRequest.resposeText;//insiro no div o que vem do servidor

var tagScript = conteudo.getElementsByTagName("script");//pego o elemento script dentro do div conteudo
eval(tagString[0].innerHTML);//passo como parametro para o metodo eval, o conteudo da primeira tag script dentro do div conteudo.

Com isso, o conteudo javascript foi lido pelo interpretador javascript do navegar e já esta na memoria, prontinho para ser usado! hehehehe No meu caso, so vou ter apenas uma tag script que vem do servidor, mas se você tiver mais que uma pode implementar um loop para percorrer todas as tag script da pagina, algo mais ou menos assim:

for(i=0; i<tagString.length; i++){
    eval(tagString[i].innerHTML)
}

Depois desse texto gigante, espero que tenha esclarecido a duvida de alguém com o mesmo problema que eu. heheheh Sofri pra descobri, mas no final a alegria de resolver o problema compensa ^^

Qualquer coisa, meu email é: moraesdno@gmail.com

Duvidas so chamar

T+

Editado Agosto 16, 2009 por Danilo Moraes

[Jonathan Queiroz]

Bem interessante sua solução !

Na verdade isso sempre ocorre mesmo ao se utilizar AJAX para obter os dados e escrever na página utilizando o innerHTML de algum elemento.

Sendo JavaScript ou CSS, sempre o mesmo problema !

Acho que poderia até mesmo ser postado algo no Repositório de Scripts (procurei um pouco e não vi nada parecido)

Obs.:

Vou marcar o tópico como Resolvido