JSF dentro de uma DIV com AJAX [RESOLVIDO]

Olá a todos,

estou com dificuldade em utilizar tags JSF dentro de uma DIV carregada por AJAX.

Exemplo:

Tenho minha página principal.
Em um menu lateral esquerdo, eu clico em uma guia qualquer.
Com ajax, essa requisição do menu lateral, abri uma Pagina.jsp dentro de uma div no meio do site sem carregar a página inteira.

fica mais ou menos assim:

Pagina.jsp

<div class="box">
	<h2>
		//Título da requisição
	</h2>
	<div>
                         //Conteúdo da requisição
        </div>
</div>

O problema é que se eu quero utilizar JSF dentro dessa Pagina.jsp, ao tentar fazer a requisição para essa Pagina.jsp abrir novamente, apresenta erros.

Erro

org.apache.jasper.JasperException: An exception occurred processing JSP page /jsp/menu/menuNavEsquerdo/turismo/mostraTurismo.jsp at line 34

31: <br><br><br>
32: <h4 style="background: #B5B5B5;" align="center">Comentários</h4>
33: 
34: 	<h:form id="search_form">
35: 		<h:inputText id="pesquisarNome"	value="#{turismoMBean.teste.nome}"/>
36: 		<h:commandButton actionListener="#{turismoMBean.metodoTeste}" 
37: 		id="submit"></h:commandButton>

Se eu digitar esse mesmo código na página principal (index.jsp) ele funciona normalmente.

O que preciso fazer para conseguir utilizar códigos JSF dentro dessa Pagina.jsp (que é carregada dentro de uma div no meio do site após uma requisição) ?

Obrigado!

duas perguntinhas:

  1. Você está usando o ajax do JSF ou alguma outra biblioteca de ajax?
  2. Você declarou os namespaces ou taglib (como a extensão é jsp creio que esteja usando as taglibs) do faces no arquivo mostraTurismo?

Não lembro bem, mas a taglib do faces se declara assim:

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
  1. Você está usando o ajax do JSF ou alguma outra biblioteca de ajax?

Não estou utilizando o ajax do JSF (talvés seja uma solução). Estou chamando uma função js com o seguinte código:

Trecho do código para chamar a página com ajax:

<a href="#" onclick="abrirPag('jsp/menu/menuNavEsquerdo/turismo/cidades.jsp');">Cidades</a>

Java script com a função do ajax:

function abrirPag(valor){  
var url = valor;  
  
xmlRequest.open("GET",url,true);  
xmlRequest.onreadystatechange = mudancaEstado;  
xmlRequest.send(null);  
  
if (xmlRequest.readyState == 1) {  
document.getElementById("conteudo_mostrar").innerHTML = "<img src='img/loader.gif'>";
document.getElementById('outrasInformacoes').style.display = "none";
document.getElementById('informacoesNovidades').style.display = "none";
}  
  
return url;  
}  
  
function mudancaEstado(){  
if (xmlRequest.readyState == 4){  
document.getElementById("conteudo_mostrar").innerHTML = xmlRequest.responseText;  
}  
} 
  1. Você declarou os namespaces ou taglib (como a extensão é jsp creio que esteja usando as taglibs) do faces no arquivo mostraTurismo?

Sim, eu declarei as taglib na página inicial (index.jsp) e também tentei adicioná-las novamente dentro da página que abre dentro da div e não funcionou. Tanto que na página index.jsp esses comandos jsf funcionam normalmente.

As taglib estão declaradas na página index.jsp assim:

<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

Se precisar de mais informações eu lhe passo.

Obrigado pela atenção!

Aí é que está o problema, tem que declarar na página que abre dentro da div, ou não vai conseguir encontrar as definições das taglibs.

Posta o código da página que tem dentro da div e seu index, para a gente ver como podemos colocar as taglibs.

Outra coisa, abre a url que seria carregada dentro da div para ver qual é o erro, se tiver algum erro (provavelmente o erro 500) o readyState não chega no 4.

Essa é a página completa que é carregada dentro da div.

Adicionando a tag fica assim:

<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>   
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<div class="box">
		<h2>
			<a href="#">Cidades</a>
		</h2>
		<div>
		
		<h:form id="search_form">   
			<h:inputText id="pesquisarNome"  value="#{turismoMBean.teste.nome}"/>   
			<h:commandButton actionListener="#{turismoMBean.metodoTeste}" id="submit"></h:commandButton>
		</h:form>

		</div>
	</div>

Ou assim:

<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>   
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<div class="box">
		<h2>
			<a href="#">Cidades</a>
		</h2>
		<div>
		<f:view>
		<h:form id="search_form">   
			<h:inputText id="pesquisarNome"  value="#{turismoMBean.teste.nome}"/>   
			<h:commandButton actionListener="#{turismoMBean.metodoTeste}" id="submit"></h:commandButton>
		</h:form>
                            </f:view>
		</div>
	</div>

Já tentei das duas formas e não funcionou. Essa estrutura completa da página que abre dentro da div no meio do site.
Estou no trabalho agora e não tem como pegar o erro pra você. Mas o erro reclama de alguma coisa relacionado às esses valores:
#{…}.

Lembrando que dentro do index.jsp já esta declarado as taglib e o código descrito funciona normal se colocado direto na index.jsp.

Index.jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<jsp:include page="jsp/imports.jsp"></jsp:include>
<title>Insert title here</title>
</head>
<body>
	<f:view>
		<div class="container_16">

			<!-- TITULO -->
			<jsp:include page="jsp/titulo.jsp"></jsp:include>

			<!-- MENU DE NAVEGAÇÃO SUPERIOR  -->
			<jsp:include page="jsp/menu/menuNavSuperior/menuNavSuperior.jsp"></jsp:include>

			<!-- ITENS EM DESTAQUE -->
			<jsp:include page="jsp/destaque.jsp"></jsp:include>

			<div class="grid_4">

				<!-- PESQUISA -->
				<jsp:include page="jsp/pesquisa.jsp"></jsp:include>

				<!-- MENU DE NAVEGAÇÃO ESQUERDO -->
				<jsp:include page="jsp/menu/menuNavEsquerdo/menuNavEsquerdo.jsp"></jsp:include>


			</div>
			<div class="grid_7">

				<!-- INFORMAÇÕES E NOVIDADES -->
				<jsp:include page="jsp/informacoesNovidades.jsp"></jsp:include>

				<!-- OUTRAS INFORMAÇÕES -->
				<jsp:include page="jsp/outrasInformacoes.jsp"></jsp:include>

				<!-- CARREGAMENTO PAGINA -->
				<div class="box" style="display: block">
	                                                    <div id="conteudo_mostrar">
                                                                  </div>
                                                        </div>

			</div>

			<div class="grid_5">

				<!-- TWITTER 
				<jsp:include page="jsp/twitter.jsp"></jsp:include>
				-->

			</div>

			<!-- RODAPE -->
			<jsp:include page="jsp/rodape.jsp"></jsp:include>
		</div>
	</f:view>
</body>
</html>

Obrigado pela atenção!

Quando vai incluir alguma taglib, você precisa primeiro, da mesma forma que no seu index, incluir a definição da linguagem:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"  
    pageEncoding="ISO-8859-1"%>

Já fiz isso também e não adiantou =/

Fiz um outro teste aqui… descobri que qualquer código jsf que eu coloco dentro da página index.jsp funciona normal, mesmo se estiver dentro de uma div.
O problema eh que sempre quando chamo uma página com o onclick=“abrirPag(‘pagina.jsp’);”, da erro no código jsf.
Erro 500.

qual erro mostra no erro 500? Conseguiu acessar a url do ajax direto no navegador, sem o ajax?

Eu não sei muito bem disso, porque uso o xhtml (é mais rápido) e o ajax do próprio JSF. Mas no xhtml, o faces exige as tags html e body em todas as páginas, as que não tem, exige o ui:composition.

poste o erro assim e melhor para poder ajudalo!
:smiley:

Um dos erros é esse:

[code]HTTP Status 500 -
type Exception report

message

description The server encountered an internal error () that prevented it from fulfilling this request.

exception

org.apache.jasper.JasperException: An exception occurred processing JSP page /jsp/menu/menuNavEsquerdo/agitos/bares.jsp at line 4

1:


2: <%@ taglib prefix=“f” uri=“http://java.sun.com/jsf/core”%>
3: <%@ taglib prefix=“h” uri=“http://java.sun.com/jsf/html”%>
4: <f:view>
5: <h:form id=“search_form”>
6: <h:inputText id=“pesquisarNome” value="#{turismoMBean.teste.nome}"></h:inputText>
7: <h:commandButton styleClass=“search_button”

Stacktrace:
org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServletWrapper.java:553)
org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:442)
org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:391)
org.apache.jasper.servlet.JspServlet.service(JspServlet.java:334)
javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
root cause

javax.servlet.ServletException: javax.servlet.jsp.JspException: Cannot find FacesContext
org.apache.jasper.runtime.PageContextImpl.doHandlePageException(PageContextImpl.java:911)
org.apache.jasper.runtime.PageContextImpl.handlePageException(PageContextImpl.java:840)
org.apache.jsp.jsp.menu.menuNavEsquerdo.agitos.bares_jsp._jspService(bares_jsp.java:80)
org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:419)
org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:391)
org.apache.jasper.servlet.JspServlet.service(JspServlet.java:334)
javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
root cause

javax.servlet.jsp.JspException: Cannot find FacesContext
javax.faces.webapp.UIComponentTag.doStartTag(UIComponentTag.java:405)
com.sun.faces.taglib.jsf_core.ViewTag.doStartTag(ViewTag.java:105)
org.apache.jsp.jsp.menu.menuNavEsquerdo.agitos.bares_jsp._jspx_meth_f_005fview_005f0(bares_jsp.java:95)
org.apache.jsp.jsp.menu.menuNavEsquerdo.agitos.bares_jsp._jspService(bares_jsp.java:71)
org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:419)
org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:391)
org.apache.jasper.servlet.JspServlet.service(JspServlet.java:334)
javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
note The full stack trace of the root cause is available in the Apache Tomcat/7.0.12 logs.[/code]

Chamado a seguinte página:

[code]

<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
[/code]

Se eu rodar a página com o jsf direto, ela roda normal… se eu pegar o código e rodar dentro da index.jsp, ele roda normal…
Soh quando chamado essa página com o [quote]onclick=“abrirPag(‘jsp/menu/menuNavEsquerdo/agitos/bares.jsp’);”[/quote] que apresente esse erro. =/

não tenho certeza, mas acho que as taglibs tem que ser declaradas antes de qualquer saída de dados, no caso, antes da “div.box”.

Outra coisa que me toquei, vc está colocando um form usando ajax “não nativo” do jsf, isso pode causar conflito de id’s e javascript. Acho melhor usar o do jsf (se estiver usando o componente f:ajax, dá uma olhada na propriedade render dele), se quiser tentar ainda assim com o ajax direto pelo javascript (sem o controle dentro do java), pode tentar forçar os id’s declarando todos os componentes jsf da página com ids diferentes. Lembrando que ids do jsf de componentes dentro de um form, ficam em javascript com o ‘id do form’:‘id do componente jsf’.

Pessoal, resolvi o problema da seguinte maneira:

A página com as tags JSF estava sendo chamado como JSP.

Exemplo:

Se existir uma página de nome adicionaCLiente.jsp e eu chamá-la como adicionaCliente.jsp, todas as tags JSF não irão funcionar.

Para solucionar o problema, apenas chame a página com a extensão JSF, nesse caso seria adicionaCliente.jsf

Vlw a atenção galera!!!