Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

green angel

Javascript dentro de PHP não funcionaa

Recommended Posts

green angel

Boas

Tenho um pedaço de código de Javascript dentro de PHP mas este não funciona. Só executa a primeira instrução (coloquei esta 1ª instrução para ter a certeza que o código estava a ser reconhecido).

      echo "<script type='text/javascript'>"; 
      echo "    alert('Sucesso!');"; 
      echo "    document.getElementById('num').style.border = 'solid'; "; 
      echo "    document.getElementById('num').style.borderWidth = '2px'; "; 
      echo "    document.getElementById('num').style.borderColor = 'red'; "; 
      echo " </script>";  

Agradeço que alguém me ajude, visto que é bastante ter esta parte do código a trabalhar.

Share this post


Link to post
Share on other sites
green angel

Existe um elemento com o ID "num" e o Firebug não reporta erros .

Share this post


Link to post
Share on other sites
scorch

Vê se no source da página tem o código todo. Se tiver a culpa não é do PHP mas sim do JavaScript. :P


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
green angel

Pois .

É o mais provável . Coloquei agora o Javascript fora do PHP e este não funciona . Mas coloquei-o no body com o evento onLoad e já funcionou . O que é esquisito visto ter algo parecido a funcionar .

:P

É possível, então, moverem este tópico para a parte do Javascript ?

Share this post


Link to post
Share on other sites
green angel

Ninguém ajuda ?

Eu tenho o seguinte código que pretendo que mude a border de uma input text mas não está a funcionar. Já coloquei este pedaço de código fora das tags php e também não funcionou, depois coloquei-o no evento onLoad da tag body e ai já funcionou .

      echo "<script type='text/javascript'>"; 
      echo "    alert('Sucesso!');"; 
      echo "    document.getElementById('num').style.border = 'solid'; "; 
      echo "    document.getElementById('num').style.borderWidth = '2px'; "; 
      echo "    document.getElementById('num').style.borderColor = 'red'; "; 
      echo " </script>";  

Share this post


Link to post
Share on other sites
mjamado

Eu tenho o seguinte código que pretendo que mude a border de uma input text mas não está a funcionar. Já coloquei este pedaço de código fora das tags php e também não funcionou, depois coloquei-o no evento onLoad da tag body e ai já funcionou .

Em que ponto do HTML está a "cuspir" isso cá para fora?


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
mjamado

Depois da tag <body> .

Problema encontrado.

O JavaScript é executado quando e onde é "cuspido". E não encontra o elemento 'num' porque este ainda não faz parte da DOM, visto que é desenhado mais para a frente. Para obteres o efeito pretendido, tens de colocar esse script depois de desenhares o elemento 'num' (não recomendado) ou colocares isso numa função chamada no onLoad do documento (recomendado).


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
green angel

Problema encontrado.

O JavaScript é executado quando e onde é "cuspido". E não encontra o elemento 'num' porque este ainda não faz parte da DOM, visto que é desenhado mais para a frente. Para obteres o efeito pretendido, tens de colocar esse script depois de desenhares o elemento 'num' (não recomendado) ou colocares isso numa função chamada no onLoad do documento (recomendado).

Porque é que dizes que colocar esse script depois de desenhar o elemento "num" não é recomendado ?

Share this post


Link to post
Share on other sites
scorch

Porque cada browser interpreta o JavaScript na ordem "que quer".


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
scorch

Mas então interpretam-no de maneira diferente, pois tinha um script que interagia com elementos da página, e nuns browsers funcionava e noutros não.


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
pwseo

De qualquer modo, fica sempre melhor fazer como o mjamado disse e colocar isso numa função chamada no evento onload.

O código HTML fica independente do javascript utilizado (fica apenas uma linha que importa o script, idealmente), e isso facilita a manutenção da página... Imaginem que um dia é preciso mover o elemento #num... se o script estiver directamente no código é necessário ter sempre a preoupação de colocar o script no local certo...

<head>
  <!-- ... -->
  <script type="text/javascript" src="script.js"></script>
  <!-- ... -->
</head>

E depois no ficheiro script.js:

(function() {
  // Esta função é chamada no onLoad
  function dostuff() {
    var elemento = document.getElementById("num");
    // fazes o que quiseres com o elemento aqui
  }

  // este fragmento faz com que a função seja chamada no onLoad
  if (window.addEventListener) {
    window.addEventListener("load", dostuff, false);
  }
  else {
    // Da última vez que verifiquei, o IE6 só funcionava se fosse por este ramo da condição.
    window.attachEvent("onload", dostuff);
  }
})();

Share this post


Link to post
Share on other sites
green angel

Obrigado pelas respostas, resolvi o problema da seguinte forma:

echo "<script type='text/javascript'>"; 
echo "function campo_errado() {"; 
echo "document.getElementById('num').style.border = 'solid'; ";
echo "document.getElementById('num').style.borderWidth = '2px'; ";
echo "document.getElementById('num').style.borderColor = 'red'; "; 
echo "} ";
echo "</script>";

Depois chamo a função:

<body onload="campo_errado()">

E pronto, já funciona :)

Share this post


Link to post
Share on other sites
mjamado

De qualquer modo, fica sempre melhor fazer como o mjamado disse e colocar isso numa função chamada no evento onload.

O código HTML fica independente do javascript utilizado (fica apenas uma linha que importa o script, idealmente), e isso facilita a manutenção da página... Imaginem que um dia é preciso mover o elemento #num... se o script estiver directamente no código é necessário ter sempre a preoupação de colocar o script no local certo...

Essa é uma justificação perfeitamente válida, mas há outra, que me preocupa mais:

O JavaScript é "DOM blocking", isto é, enquanto não for executado, o browser não desenha mais nada. De certeza que já viram sites (mal feitos) carregarem um pedaço, depois ficam a moer, e depois carregam o resto. A maioria das vezes é JavaScript que está naquele sítio, tipo o carregador do Analytics ou de publicidade, ou o raio.

JavaScript é para ser executado no final da página carregar, ponto. Via onLoad ou, para quem usa o jQuery, via ready.


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
pwseo

@mjamado: pois, estava a esquecer-me desse grande pormenor

@green angel:

Mesmo que tenha funcionado da forma que fizeste, aconselhava-te a fazeres como eu demonstrei.

Da forma que fizeste, se por acaso quiseres chamar mais alguma função no evento onLoad tens que ir ao HTML editar o atributo onload do <html> (o que não parece fazer muito sentido) e estás a misturar javascript no html... Da forma que eu te mostrei, basta referenciares o script dentro do html e o proprio script trata de se introduzir a si mesmo na lista de eventos onLoad.

Outra coisa, imagina que ao chegar ao <html onload="campo_errado()"> o browser já tinha outros eventos onLoad definidos (de possíveis scripts que possas incluir).. O que acontece é que ao definires tu directamente isso no elemento <html> vais limpar a lista de eventos "agendados" e apenas o campo_errado() será executado (porque passa a ser o único evento definido).

Share this post


Link to post
Share on other sites
green angel

@green angel:

Mesmo que tenha funcionado da forma que fizeste, aconselhava-te a fazeres como eu demonstrei.

Da forma que fizeste, se por acaso quiseres chamar mais alguma função no evento onLoad tens que ir ao HTML editar o atributo onload do <html> (o que não parece fazer muito sentido) e estás a misturar javascript no html... Da forma que eu te mostrei, basta referenciares o script dentro do html e o proprio script trata de se introduzir a si mesmo na lista de eventos onLoad.

Outra coisa, imagina que ao chegar ao <html onload="campo_errado()"> o browser já tinha outros eventos onLoad definidos (de possíveis scripts que possas incluir).. O que acontece é que ao definires tu directamente isso no elemento <html> vais limpar a lista de eventos "agendados" e apenas o campo_errado() será executado (porque passa a ser o único evento definido).

A maneira que indicaste é bastante útil, mas julgo que não se aplica à minha situação porque eu tenho as funções que utilizo em diferentes páginas num ficheiro à parte, mas tenho que chama-las no meio do código html e algumas dessas funções possuem parâmetros diferentes para diferentes páginas

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.