JSF + javascript

Front-end
#1

Olá!!

Estou com um problema para usar javascript + JSF
quero fazer com que ao clicar em um botão um campo se esconda
estou fazendo algo assim:

_template:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:f="http://java.sun.com/jsf/core"
	  xmlns:ui="http://java.sun.com/jsf/facelets"
	  xmlns:p="http://primefaces.prime.com.tr/ui"
	  xmlns:h="http://java.sun.com/jsf/html"
	  xmlns:s="http://jboss.org/seam/faces">

<h:head>
	<title>teste</title>

	<link rel="StyleSheet" type="text/css" href="midia/css/style.css"/>
	<h:outputScript library="js" name="jquery.min.js" />
        <link rel="StyleSheet" type="text/css" href="midia/css/skin_dark_driver.css"/>	  

</h:head>

<h:body>
	<div id="cabecalho">
		<iframe allowtransparency="true" id="thatframe" style="overflow: hidden;" src="midia/cabecalho.jsp" frameborder="0" width="1008" height="150"></iframe>
	</div>
	<div id="conteudo" width="1008">
		<ui:insert name="corpo"/>
	</div>	
	<div id="rodape">
		<iframe ALLOWTRANSPARENCY="true" style="overflow:hidden;" FRAMEBORDER="0" width="1004" height="17" src="midia/rodape.htm"></iframe>
	</div>
</h:body>
</html>

página:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition  xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:f="http://java.sun.com/jsf/core"
	  xmlns:h="http://java.sun.com/jsf/html"
	  template="\_template.xhtml"
	  xmlns:ui="http://java.sun.com/jsf/facelets"
	  xmlns:p="http://primefaces.prime.com.tr/ui"
	  xmlns:s="http://jboss.org/seam/faces">	  
<script>
	function teste() {
	document.getElementById["form:botoes"].style.display = 'none';
	}
</script>
	<ui:define name="corpo">
		<link rel="StyleSheet" type="text/css" href="midia/css/editar.css"/>

                        <h:form id="botoes" prependId="false">		
				<p:commandButton value="Concluir" action="#{anexoBean.grava}" />
				<p:commandButton value="Confirmar" onclick="return teste();"/>
			
			</h:form>

	</ui:define>
</ui:composition>

e não ta dando certo…
não sei se estou colocando o javascript / script em local errado
ou o que está acontecendo…
obrigado!!

#2 
document.getElementById["form:botoes"].style.display = 'none';

ao invés de colchetes, são parênteses:

document.getElementById("form:botoes").style.display = 'none';

agora, uma outra coisa nada a ver com sua dúvida: é sério que vc tá usando iframes? se é só pro cabeçaljo e rodapé, não era melhor usar um include do xhtml?

#3

não funcionou…

tentei assim:

var component = document.getElementById("form:botoes"); component.style.visibility = "hidden";

e também não foi!

tem alguma coisa a ver com a posição de onde coloquei o script?

sobre os iframes, sinceramente não sei cara… tem tempo que faço assim e nunca cheguei a pensar em mudar.
teria muita diferença mudar de iframe p/ include?

#4

aproveitando o tópico
qual seria o melhor jeito de fazer isso?
com JS mesmo ou com aquelas interações c/ Ajax?

#5

Você já verificou o id no código gerado que vai pro navegador? Talvez seja diferente de “form:botoes”, por isso não está funcionando.

Quanto a sua pergunta, eu preferiria usar ajax, só quando fosse mesmo buscar dados no servidor, se é só esconder/mostrar elementos, melhor só JS mesmo.

#6

já sim julio… pelo fato de ter colocado:

prependId="false"

ele vem com o valor do id ‘real’.

fiz de um jeito aqui e ‘funcionou’ fácil… veja o que acha:

[code]<h:selectOneMenu value="#{baseBean.movimento.tipo}" onchange=“load()”>
<f:selectItem itemValue=“Deposito1l” itemLabel=“Deposito1”></f:selectItem>
<f:selectItem itemValue=“Deposito2” itemLabel=“Deposito2”></f:selectItem>
</h:selectOneMenu>

<p:outputPanel id=“painelTeste” layout=“block”>
<h:outputText value=“Informar outro banco:”
rendered="#{requestScope.shouldRender}"/>
<h:inputText id=“VLRPGTOEFETUADO22” value ="" rendered="#{requestScope.shouldRender}"></h:inputText>
</p:outputPanel>

 <p:remoteCommand name="load" update="painelTeste">  
     <f:setPropertyActionListener value="#{true}"   
         target="#{requestScope.shouldRender}" />  
 </p:remoteCommand>[/code]

só não aprendi a tratar isso ainda…
pq na prática vai ser um selectOneMenu com umas 10 opções, ai se o cara selecionar “outro banco” vou abrir um campo para que ele informe esse outro banco…

#7

Não conheço o primefaces, por isso não sei dizer se esse seria o jeito mais correto.

Mas bom que pelo menos está funcionando.

#8

mesmo assim queria aprender a fazer isso ai com JS…
se alguém souber o porque de não estar funcionando…

#9

document.getElementById[“form:botoes”].style.display = ‘none’

substitua por isso:
document.getElementById(‘form:botoes’).style.display = ‘none’

#10