Saudações a todos!! Necessito de ajuda para fazer funcionar o tabPanel na minha aplicação web.
Não consigo fazer a navegação entre as abas gerando um erro: Erro:
“element.hasClassName is not a function
Arquivo-fonte: http://localhost:8080/gcor/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.PrototypeScript.jsf
Linha: 106”
Já procure na net no entanto não encontro exemplos claros de sua utilização e possiveis comflitos. Abaixo segui o codigo de minha pagina:
O formulário de cadastro:
<?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>
<ui:composition template="/template/atendimento.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<ui:define name="titulo">
Cadastros :: Agentes de Crédito
</ui:define>
<ui:define name="caminho">
Cadastros > Agentes de Crédito
</ui:define>
<ui:define name="conteudo">
<rich:panel styleClass="painel" headerClass="painel-titulo">
<f:facet name="header">Agentes de Crédito</f:facet>
<rich:tabPanel switchType="client">
<rich:tab label="Dados Pessoais">
<table cellpadding="0" cellspacing="3" border="0" width="100%">
<tr>
<td align="right"><h:outputText value="Nome:" /></td>
<td align="left"><h:inputText id="nome"
value="#{agenteController.agenteCredito.nome}" size="50"
maxlength="100" styleClass="campos" required="true"
requiredMessage="Campo requerido" /></td>
<td><h:message for="nome" errorClass="errorcampos" /></td>
</tr>
</table>
</rich:tab>
<rich:tab label="Comissões"></rich:tab>
</rich:tabPanel>
</rich:panel>
<rich:panel styleClass="painel-botoes">
<h:panelGrid columns="2">
<h:commandButton value="Salvar" action="#{agenteController.salvar}"
styleClass="botoes" />
<h:commandButton value="Cancelar" action="listaAgenteCredito"
immediate="true" styleClass="botoes" />
</h:panelGrid>
</rich:panel>
</ui:define>
</ui:composition>
</html>
O template q incluo:
<?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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jstl/core" lang="pt-br">
<head>
<link href="/gcor/css/estilos.css" rel="stylesheet" type="text/css" />
<a4j:loadScript src="/scripts/jquery.js" />
<a4j:loadScript src="/scripts/jquery.maskedinput.js" />
<a4j:loadScript src="/scripts/jquery.price_format.js" />
</head>
<body>
<h:form id="formTemplate" prependId="false">
<div id="pagina">
<table id="tabela-pagina" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="50" colspan="2" style="border-bottom: 2px solid #0059A9;">
<!-- cabecalho -->
<table id="cabecalho" cellpadding="0" cellspacing="0" border="0"
style="padding: 10px;">
<tr>
<td width="70" style="padding-left: 10px;"><img
src="/gcor/imagens/logo_gcor.png" /></td>
<td width="100%"> </td>
<td width="70" align="right" style="padding-right: 10px;"><img
src="/gcor/imagens/logo_empresa.png" width="200" /></td>
</tr>
</table>
<!-- fim cabecalho --></td>
</tr>
<tr>
<td height="25" colspan="2"><!-- menu -->
<ul id="menu">
<li><a href="/gcor/pages/admin/index.jsf">Cadastros</a></li>
<li><span class="separador">|</span></li>
<li><a href="/gcor/pages/atendimento/index.jsf">Atendimento</a></li>
<li><span class="separador">|</span></li>
<li><a href="#">Formalização</a></li>
<li><span class="separador">|</span></li>
<li><a href="#">Financeiro</a></li>
<li><span class="separador">|</span></li>
<li><a href="#">Relatórios</a></li>
</ul>
<!-- fim menu --></td>
</tr>
<tr style="font-size: 8pt;">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td height="20" align="left" colspan="2"
style="line-height: 20px; padding: 5px; border-bottom: 1px solid #0059A9;">
<span style="color: #FBB03B; font-weight: bold;">Bem vindo:</span>
<span style="color: #3951A3;"><h:outputText value="#{loginController.usuario.nome}" /></span>
<a href="#" jsfc="h:commandLink" action="#{loginController.logout}" immediate="true">
| Sair do Sistema
</a>
</td>
<td align="right"
style="padding: 5px; color: #3951A3; border-bottom: 1px solid #0059A9;">
Você está em: <ui:insert name="caminho"></ui:insert></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="200" valign="top"><!-- menu -->
<ul id="sub-menu">
<li id="titulo">Atendimento</li>
<li><h:commandLink action="listaAgenteCredito" value="Agentes de Crédito"></h:commandLink></li>
</ul>
<!-- fim menu --></td>
<td valign="top" align="center" id="sub-pagina">
<h:messages errorClass="errormessages" fatalClass="fatalmessages"
infoClass="infomessages" warnClass="warnmessages" globalOnly="true" />
<ui:insert name="conteudo"></ui:insert>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</h:form>
</body>
</html>
o web.xml:
<?xml version="1.0"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name>GCOR</display-name>
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.CONTROL_SKINNING</param-name>
<param-value>enable</param-value>
</context-param>
<context-param>
<param-name>facelets.DEVELOPMENT</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>classic</param-value>
</context-param>
<context-param>
<param-name>javax.faces.CONFIG_FILES</param-name>
<param-value>/WEB-INF/faces-config.xml</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<login-config>
<auth-method>BASIC</auth-method>
</login-config>
<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
<filter>
<filter-name>openEntityManager</filter-name>
<filter-class>
org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter
</filter-class>
</filter>
<filter-mapping>
<filter-name>openEntityManager</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter>
<display-name>Ajax4JSF</display-name>
<filter-name>ajax4jsf</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>ajax4jsf</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
<!-- Filtro para a entrada do usuáriio -->
<filter>
<description>
Filtro para restringir a entrada do usuário
</description>
<filter-name>FiltroUsuario</filter-name>
<filter-class>
br.com.mileniumtech.gcor.utils.SegurancaFiltro
</filter-class>
</filter>
<!-- Determina a pagina que será filtrada -->
<filter-mapping>
<filter-name>FiltroUsuario</filter-name>
<url-pattern>/pages/home.xhtml</url-pattern>
</filter-mapping>
<security-constraint>
<display-name>
Bloqueia o browser de acessar arquivos xhtml
</display-name>
<web-resource-collection>
<web-resource-name>xhtml files</web-resource-name>
<url-pattern>*.xhtml</url-pattern>
</web-resource-collection>
<auth-constraint />
</security-constraint>
</web-app>
Alguém poderia me dizer por q nao consigo fazer funcionar o TabPanel na minha pagina? Grato pela atenção de todos!!