Duvida, JSF com javaScript[RESOLVIDO]

Front-end
#1

Bom dia amigos,

Então, recentemente fiz um curso de javaScript e antes disso ja trabalho com java web… JSF e agora to com duvidas em ‘juntar’ os dois,
vo ilustra com meu codigo pra ficar mais claro

esse é meu formulario com datatable, os valores vem de um arraylist no meu mbean

<!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:ui="http://java.sun.com/jsf/facelets" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core">

<h:head>

	<script type="text/javascript" src="../resoures/scripts/values.js"></script>
	
   </h:head>
   
   <h:body>
   <h:form>
    <h2>#{mesg.titulodois}</h2>
   		<h4><h:commandLink style="color: green;" action="retornarMenu" value="#{mesg.retornar}" /></h4>
   </h:form>
   		<h:form id="formulario">
   			<h:dataTable border="1" value="#{produtoMB.listAll}" var="prod">
   				<h:column>
   					<f:facet name="header">
   						#{mesg.prodCod}
   					</f:facet>
   						<h:outputText value="#{prod.cod}" name="codigo" >
   						</h:outputText>
   				</h:column>
   				<h:column>
   					<f:facet name="header">
   						#{mesg.ProdName}
   					</f:facet>
   					<h:outputText  value="#{prod.nome}" name="nome">
   					</h:outputText>
   				</h:column>
   				<h:column>
   					<f:facet name="header">
   						#{mesg.ProdPreco}
   					</f:facet>
   					<h:outputText value="#{prod.preco}" name="preco">
   					</h:outputText>
   				</h:column>
   				<h:column>
   					<f:facet name="header">
   						#{mesg.emEstoque}
   					</f:facet>
   					<h:outputText value="#{prod.quantidade}" name="estoque">
   					</h:outputText>
   				</h:column>
   				<h:column>
   					<h:panelGrid columns="1">
   						<h:commandButton value="#{mesg.adicionar}" id="botao">
   						</h:commandButton> 
   					</h:panelGrid>
   				</h:column>
   			</h:dataTable>
   		</h:form>
   </h:body>
   
   
</html>

JavaScript

window.onload = function (){
	
	var formulario = document.getElementById("formulario");
	var cod = formulario.codigo.value;
	
	document.getElementById("botao").onclick = function(){
		alert("funciona");
	};
	
	function teste(){
		
		alert(cod);
	}
	
};

O objetivo desse script seria apenas pegar o valor do campo codigo e apresentar na tela, só pra teste mesmo, mas
nao consigo acessar nada, nem botao nem nada. Gostaria de algum exemplo ou dica de como acessar um DataTable e tambem se ouver
criticas construtivas para meu codigo pois so iniciante ainda.

Agradeço desde já, abraço

#2

O problema é que você está fazendo um getElementById diretamente pelo id “botao”,
quando que este botão está dentro de outros containeres (o form, o datatable, a linha do datatable).

Você precisa especificar estes containeres no id. Uma dica é examinar com o firebug ou chrome o id gerado pelo jsf.

Se você definir o id do datatable como “tabela” por exempo, altere o teu javascript para

[code]window.onload = function (){

document.getElementById("formulario:tabela:0:botao").onclick = function(){  
    alert("funciona");  
};

};
[/code]
Espero que te ajude.

#3

[quote=cgraf]O problema é que você está fazendo um getElementById diretamente pelo id “botao”,
quando que este botão está dentro de outros containeres (o form, o datatable, a linha do datatable).

Você precisa especificar estes containeres no id. Uma dica é examinar com o firebug ou chrome o id gerado pelo jsf.

Se você definir o id do datatable como “tabela” por exempo, altere o teu javascript para

[code]window.onload = function (){

document.getElementById("formulario:tabela:0:botao").onclick = function(){  
    alert("funciona");  
};

};
[/code]
Espero que te ajude.[/quote]

Blz cara funcionou, era isso mesmo que faltava, só que ai vai mais uma pergunta
devido ao ‘:0:’ a função só funciona no primeiro botão… qual seria a forma pra funcionar igual em todos?
Obrigado

#4

Bom, aí depende do que você realmente quer fazer…

  1. Precisa mesmo dos botões dentro do datatable? Se sim, o que irá diferenciar um botão do outro?
  2. Se você está fazendo um crud poderia usar um commandLink ou commandButton
  3. Você pode usar também o jquery para definir a mesma função para todos os botões do datable (usando um selector)
  4. Não me vem mais nada na cabeça :slight_smile:

sds

#5

[quote=cgraf]Bom, aí depende do que você realmente quer fazer…

  1. Precisa mesmo dos botões dentro do datatable? Se sim, o que irá diferenciar um botão do outro?
  2. Se você está fazendo um crud poderia usar um commandLink ou commandButton
  3. Você pode usar também o jquery para definir a mesma função para todos os botões do datable (usando um selector)
  4. Não me vem mais nada na cabeça :slight_smile:

sds
[/quote]

O que estou fazendo é pra ser uma loja virtual, então esse botão adicionar server pra pegar o valor da linha e jogar pra uma outra tabela na mesma pagina,
então ao clicar no botão ele tem que saber que quero aquela linha e jogar os valores para outra tabela de baixo entende…

Vo aproveitar esse post pra contar a história desde o inicio kk, comecei aprendendo java web e fazendo minha lojinha virtual… só que quando chegou nessa parte de pegar valores,
transferi pra outra tabela, só com o java não tava dando certo e foi ai que recorri a um amigo que me recomendou usar javaScript e ajax, e foi oque eu fiz, tranquei o projeto da minha loja e fui estudar javaScript e ajax através de video aulas… e hoje voltei com meu projeto da loja e estou com essas duvidas na junção de jsf e javaScript da qual citei e tenho ctz que surgirão outras. Então fica tambem minha pergunta, voce acha que deveria trancar denovo e estudar jquery? tipo eu preferia primeiro aprender a lidar com jsf e javaScript e depois ir pro jQuery (que são os meus planos), mas isso ae cara, até onde vc puder me ajudar aqui… fico muito grato. Abraço

#6

Só para encerrar, não posso te dizer o que fazer…isto depende do teu projeto e aí está a graça da coisa (pesquisar, testar, etc)

Mas acredito que a maneira mais fácil de fazer o que você quer é esquecer o javascript e usar jsf com ajax. Esta é a grande vantagem do jsf.

Use o commandButton com ajax e uma list por exemplo no teu managed bean para simular o carrinho de compras

sds

#7