XHTML + Javascript + EJB

Front-end
#1

Olá,

Eu tenho um xhtml que no action de um botão chama um método na minha classe do EJB. Esse método retorna true ou false, gostaria de saber como eu faço para pegar esse retorno do método que está sendo chamado de um action do botão para passar esse retorna para uma função javascript.

trecho do código

<script language="javascript">
    	function teste(retornoUsuario){
             alert(retornoUsuario);
    	}	
</script>
...
<h:commandButton id="botao" value="Entrar" action="#{usuarioMB.login()}"  />
...

Eu não sei como após executar a ação do action do botao, chamar a minha função javascript.

#2

Primeira coisa, você precisa entender que o javascript deve ser acionado a partir de algum evento na página, seja ele o carregamento da mesma ou o clique do mouse, por exemplo.
Partindo disso, você terá que ler o elemento html cujo valor deve ter sido alterado pela execução do método do EJB. Você pode acessar esses elementos utilizando técnicas de DOM, por exemplo. Para isso, precisará saber como identificar o(s) elemento(s) desejado(s).
A w3schools.com é um ótimo lugar para pesquisar sobre javascript e dom.
De resto, é só seguir a linha de raciocínio que está usando.

#3

[quote=drsmachado]Primeira coisa, você precisa entender que o javascript deve ser acionado a partir de algum evento na página, seja ele o carregamento da mesma ou o clique do mouse, por exemplo.
Partindo disso, você terá que ler o elemento html cujo valor deve ter sido alterado pela execução do método do EJB. Você pode acessar esses elementos utilizando técnicas de DOM, por exemplo. Para isso, precisará saber como identificar o(s) elemento(s) desejado(s).
A w3schools.com é um ótimo lugar para pesquisar sobre javascript e dom.
De resto, é só seguir a linha de raciocínio que está usando.[/quote]

A sim, eu entendi. Mas com DOM eu tenho como esperar a execução do action e depois chamar uma função javascript?

#4

[quote=drsmachado]Primeira coisa, você precisa entender que o javascript deve ser acionado a partir de algum evento na página, seja ele o carregamento da mesma ou o clique do mouse, por exemplo.
Partindo disso, você terá que ler o elemento html cujo valor deve ter sido alterado pela execução do método do EJB. Você pode acessar esses elementos utilizando técnicas de DOM, por exemplo. Para isso, precisará saber como identificar o(s) elemento(s) desejado(s).
A w3schools.com é um ótimo lugar para pesquisar sobre javascript e dom.
De resto, é só seguir a linha de raciocínio que está usando.[/quote]

Eu fiz um teste:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Login Web</title>
    </h:head>
    
    <script language="javascript">
    	function teste(){ 
			alert(document.getElementById("botao"));
    	}	
    </script>
    
    <h:body>
      <h:form id="formLogin">
        <h1><h:outputText id="bemVindo" value="Bem vindo(a) ao sistema."/></h1>
        <h:panelGrid id="gridLoginSenha" columns="2">
          <h:outputText id="loginLabel" value="Login:"/>
          <h:inputText id="usuario" value="#{usuarioMB.usuario.nome}" 
      			required="true" requiredMessage="Campo obrigatório"
      			maxlength="50"/>
 
          <h:outputText id="senhaLabel" value="Senha:"/>
          <h:inputSecret id="senha" value="#{usuarioMB.usuario.senha}"
          		required="true" requiredMessage="Campo obrigatório"
          		maxlength="10"/>
        </h:panelGrid>
        <h:commandButton id="botao" value="Entrar" action="#{usuarioMB.login()}" onclick="teste()" />
      </h:form>
    </h:body>
</html>

Meu alert show null. Porque se existe o id?

#5

Por que está errado.
O evento não é o onclick, ele é disparado no click do botão, logo, ele é disparado antes da execução do método.
O que você precisa fazer é condicionar a execução da função à existência do elemento, após o processamento do método.

#6

[quote=drsmachado]Por que está errado.
O evento não é o onclick, ele é disparado no click do botão, logo, ele é disparado antes da execução do método.
O que você precisa fazer é condicionar a execução da função à existência do elemento, após o processamento do método.[/quote]

Mas como eu vou chamar a função se o elemento não existir. Como vou chamar a função após o processamento do método?

#7

Cara, javascript possui if, certo?
Você pode invocar a função após o carregamento da página (evento onload, do elemento body) e pode colocar o script após a criação do elemento. Então, põe esse cérebro para funcionar.

#8

[quote=drsmachado]Cara, javascript possui if, certo?
Você pode invocar a função após o carregamento da página (evento onload, do elemento body) e pode colocar o script após a criação do elemento. Então, põe esse cérebro para funcionar.[/quote]

Cara é exatamente isso que eu estou lhe falando, não está considerando a criação do elemento. Mesmo clicando no botão entrar o alert sempre exibi NULL.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Login Web</title>
    </h:head>
    <h:body onload="teste()">
      <h:form id="formLogin">
        <h1><h:outputText id="bemVindo" value="Bem vindo(a) ao sistema."/></h1>
        <h:panelGrid id="gridLoginSenha" columns="2">
          <h:outputText id="loginLabel" value="Login:"/>
          <h:inputText id="usuario" value="#{usuarioMB.usuario.nome}" 
      			required="true" requiredMessage="Campo obrigatório"
      			maxlength="50"/>
 
          <h:outputText id="senhaLabel" value="Senha:"/>
          <h:inputSecret id="senha" value="#{usuarioMB.usuario.senha}"
          		required="true" requiredMessage="Campo obrigatório"
          		maxlength="10"/>
        </h:panelGrid>
        <h:commandButton id="botao" value="Entrar" action="#{usuarioMB.login()}" />
      </h:form>
      <script language="javascript">
      	function teste(){
          	if(document.getElementById('botao') != null)
          		alert('NOT NULL');
          	else
              	alert('NULL'); 
    	}	
      </script>
    </h:body>
</html>
#9

Por que você ainda está fazendo errado.
Quem chama a function teste? Já parou para pensar que você pode inserir esse script em um elemento JSF, como um panelGrid, que possui um rendered e, só renderizar o conteúdo do mesmo caso o id não seja nulo?
Já criou um html puro, na mão, para testar se a forma como você está colocando é a forma mais correta?
A tarefa de programar consiste em pensar e codificar.

#10