Javascript + jsf nao pega!

Gente.

Eu tenho uma pagina(index2.jsp) que chama uma outra página dentro dela(home.jsp).

index2.jsp:

   1. <?xml version="1.0" encoding="ISO-8859-1"?>  
   2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
   3. <html xmlns="http://www.w3.org/1999/xhtml"  
   4.       xmlns:ui="http://java.sun.com/jsf/facelets"  
   5.       xmlns:h="http://java.sun.com/jsf/html"  
   6.       xmlns:f="http://java.sun.com/jsf/core"  
   7.       xmlns:a4j="http://richfaces.org/a4j"  
   8.       xmlns:rich="http://richfaces.org/rich"  
   9.       xmlns:p="http://primefaces.prime.com.tr/ui">  
  10.   
  11.     <head>  
  12.         <title>Title</title>  
  13.         <meta content='text/html; charset=ISO-8859-1' http-equiv='Content-Type'/>  
  14.         <p:resources/>  
  15.           
  16.     </head>   
  17.     <body>  
  18.         <f:view>  
  19.             <!-- Carrega o templante montado na outra pagina -->  
  20.             <ui:composition template="template.xhtml">  
  21.                 <!-- Carrega a parte CABECALHO do template -->  
  22.                 <ui:define name="header" >  
  23.                     .  
  24.                                         .  
  25.                                         .  
  26.                 </ui:define>  
  27.                   
  28.                 <!-- Carrega a parte Lateral do template (tree)-->  
  29.                 <ui:define name="tree">  
  30.                     .  
  31.                                         .  
  32.                                         .  
  33.                 </ui:define>  
  34.                   
  35.                 <!-- Carrega a parte Central do template (conteudo)-->  
  36.                 <ui:define name="content">  
  37.                      <a4j:include viewId="#{url.url}" style="margin:0;padding:0;"/>  ---------------------------------> Aqui eu chamo minha home.jsp  
  38.                 </ui:define>  
  39.                   
  40.                 <!-- Carrega a parte do RODAPE do template -->  
  41.                 <ui:define name="bottom">  
  42.                     <ui:include src="pageFooter.jsp" />  
  43.                 </ui:define>  
  44.             </ui:composition>            
  45.         </f:view>  
  46.     </body>  
  47. </html>  

home.jsp

<?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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:p="http://primefaces.prime.com.tr/ui">
   <head>
      <title>Home</title>
		<script type='text/javascript'>
			function atualiza(){
				var altura = window.innerHeight;
				document.getElementById("panel2").style.height= (altura/2)+"px";
			}
	    </script> 
   </head>
   <body onload="atualiza()">
      <h:form prependId="false">
         <h:panelGrid id="homeGrid" columns="2" width="100%" cellpadding="8px" >
            
            <p:panel id="panel1" style="width:auto;max-width:680px;min-width:420px;overflow:auto;">
               <f:facet name="header">
                  <h:outputText value="Panel1" />
               </f:facet>
               
            </p:panel>
            
            <p:panel id="panel2" style="width:auto;max-width:680px;min-width:420px;overflow:auto; ">
               <f:facet name="header">
                  <h:outputText value="Panel2" />
               </f:facet>
               <a4j:include viewId="panel2.jsp"/>
            </p:panel>
                        
            <p:panel id="panel3" style="width:auto;max-width:680px;min-width:420px;overflow:auto;"> 
               <f:facet name="header">
                  <h:outputText value="Panel3" />
               </f:facet>
               <ui:include src="panel3.jsp"/>
            </p:panel>
                     
            <p:panel id="panel4" style="width:auto;max-width:680px;min-width:420px;overflow:auto;">
               <f:facet name="header">
                  <h:outputText value="Panel4" />
               </f:facet>
               <ui:include src="panel4.jsp"/> 
            </p:panel>
               
         </h:panelGrid>
      </h:form>
   </body>   
</html>  

Quando eu coloco no browser pra rodar minha home.jsp, ela roda certinho, setando a altura do meu panel do jeito que o script manda, mas quando eu mando rodar o index.jsp, a altura do meu panel não é setada, e lá no meu console de erros fala que panel2 é null!

Alguém sabe o que pode ser feito???

já tentei colocar o script na index.jsp no template e nada…

vlw!!!

Olá
to tendo o mesmo problema, mas estou fazendo da seguinte maneira
estou estudando javascript e criei um arquivo jscript.js dentro de uma pasta js no meu projeto do netbeans.
esse arquivo só mostra um alert na tela.

eu criei um template com o nome master.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <f:view>
        <h:head>            
            <title><ui:insert name="titulo">Venda e Compra</ui:insert></title>
            <ui:insert><script type="text/javascript" src="js/jscript.js" /></ui:insert>
            <link rel="StyleSheet" type="text/css" href="resources/layout.css" media="all" />
            <link rel="StyleSheet" type="text/css" href="resources/stylesheet.css" media="all" />
        </h:head>
        <h:body>
            <h:form>
                <div id="container1" align="center">
                    <p:outputPanel>
                        <h:outputLink value="index.faces">
                            <p:graphicImage url="resources/imagens/banner4.png" />
                        </h:outputLink>
                    </p:outputPanel>                    
                </div>
                <div id="container">
                    <p:outputPanel>
                        <h:panelGrid columns="6" styleClass="topNavigationBar" width="800">
                            <h:outputLink value="cadastro.faces">Automóveis</h:outputLink>
                            <h:outputLink value="teste.faces">Celular &amp; Telefonia</h:outputLink>
                            <h:outputLink>Informática</h:outputLink>
                            <h:outputLink>Imóveis</h:outputLink>
                            <h:outputLink>Eletrônicos</h:outputLink>
                            <h:outputLink>Eletrodoméstico</h:outputLink>
                        </h:panelGrid>
                    </p:outputPanel>
                    <!--<h:panelGroup styleClass="topNavigationBar" layout="block">
                    </h:panelGroup>-->
                    <h:panelGroup styleClass="mainContent">
                        <ui:insert name="corpo">

                        </ui:insert>
                    </h:panelGroup>
                </div>
            </h:form>
        </h:body>
    </f:view>
</html>

um index.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    
    <ui:composition template="template/master.xhtml" >
        <ui:define name="corpo">
           <p:linkButton id="botao" value="Index" />
        </ui:define>
    </ui:composition>
</html>

e um teste.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    
    <h:head>
        <title>Facelet Title</title>
        <script type="text/javascript" src="js/jscript.js"/>
    </h:head>
    <h:body>        
        <!--<button type="button" id="botao">Inspecionar objeto Ajax</button>-->
        <p:linkButton id="botao" value="Teste" />
    </h:body>
</html>

Porem somente a teste.xhtml funciona,
naum sei como faço para usar o script usando esses facelets.

alguém sabe como resolver isso?

outra
renatakemi, qual versao do richfaces vc ta usando?
vc ta usando JSF 2 com AppServer GlassFish v3?

obrigado

Oi André!

então, eu não sei te dizer o que aconteceu que agora ta funcionando que é uma blz…
foi só dar um restart no meu tom cat que funcionou meu javascript e está redimensionando meus panels de acordo que eu quero dependendo do tamanho da tela do browser usado!

mas pelo que eu vi no seu caso coloca dentro da sua tag do form prependId=“false”, e no seu java script vc chama direto o id do elemento que vc quer usar, por ex: document.getElementById(“id do seu componente”)… comigo só funcionou deste jeito.

eu to usando o jsf1.2 e richfaces 3.3.1

to usando tb o primefaces versão 1.0.2.

eu não to usando glassfish, to usando o tom cat 6.0.18.

o JSF tem um sistema de identificação de componentes por hierarquia… ele manipula os ID’s de forma que contenha os ids de todos os painéis pais como prefixo. Utilizando o parâmetro “prependId = false” você está dizendo para o JSF não mudar o ID mantendo o original, por isso funciona.