Estou com um problemas nos campo onde utilizo o JQuery junto com componentes RichFAces.
Utilizado o rich:panelMenu para altera sem precisa renderiza toda a página, mas quando inicio a aplicação nenhum campo que contém máscara não funciona, mas quando mando atualizar a página volta a funciona normalmente. Já pesquisei vários tópicos no google, mas nada sobre o porque do JQuery não funciona ao start no tomcat e volta a funciona quando atualiza a página. Se alguém sobre o que deve esta ocorrendo e possa me ajuda ficarei grato
Problemas com máscara JSF e JQuery
E
6 Respostas
Kra, adivinhar é difícil, mas se vc postar o código da página eu posso tentar ajuda-lo.
E
Segue o codigo home.xhtml
Quando clico em cadastra novo paciente, renderiza o centro e adiciona o formulario 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 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:der="http://components.custom/der"
xmlns:rich="http://richfaces.org/rich" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Agenda Médica</title>
<link
href="#{facesContext.externalContext.requestContextPath}/css/estilo.css"
rel="stylesheet" type="text/css" />
<a4j:loadScript src="resource:///resources/jquery.meio.mask.min.js"
ajaxRendered="true" />
</head>
<body>
<f:view>
<rich:layout id="layout">
<rich:layoutPanel position="top" width="100%" id="layout_top">
<ui:include src="/templates/topindex.xhtml" />
</rich:layoutPanel>
<rich:layoutPanel position="center" width="75%" id="layoutcenter">
<a4j:outputPanel ajaxRendered="true">
<ui:include src="#{panelMenu.current}" />
</a4j:outputPanel>
</rich:layoutPanel>
<rich:layoutPanel position="right" width="25%" id="layoutright">
<rich:panelMenu style="width:100%" mode="ajax" iconExpandedGroup=""
iconCollapsedGroup="disc" iconExpandedTopGroup="chevronUp"
iconCollapsedTopGroup="chevronDown">
<rich:panelMenuGroup label="Cadastrar">
<rich:panelMenuGroup label="Paciente">
<rich:panelMenuItem label="Novo cadastro"
action="#{panelMenu.updateCurrent}"
actionListener="#{pacienteController.actionNovo}">
<f:param name="current" value="paciente.xhtml" />
</rich:panelMenuItem>
<rich:panelMenuItem label="Listar"
action="#{panelMenu.updateCurrent}">
<f:param name="current" value="exibirpaciente.xhtml" />
</rich:panelMenuItem>
</rich:panelMenuGroup>
</rich:panelMenu>
</rich:layoutPanel>
</rich:layout>
</f:view>
</body>
</html>
paciente.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:ajax="https://ajax4jsf.dev.java.net/ajax"
xmlns:stella="http://stella.caelum.com.br/faces"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:a4j="http://richfaces.org/a4j">
<h:form id="frm">
<rich:panel>
<f:facet name="header">
<h:outputLabel value="Cadastro de Paciente" />
</f:facet>
<rich:messages infoLabelClass="msgSucesso"
errorLabelClass="msgErroVertical" />
<h:panelGrid columns="2" columnClasses="col-a,col-b">
<h:selectBooleanCheckbox
value="#{pacienteController.paciente.ativo}" />
<h:outputLabel value="Ativo" />
<h:outputLabel value="Nome:" for="nome" />
<h:column>
<h:inputText id="nome" value="#{pacienteController.paciente.nome}"
required="true" requiredMessage="nome obrigatório."
styleClass="edit" style=" width : 432px;" />
<rich:message for="nome" errorClass="msgErroVertical" />
</h:column>
<h:outputLabel for="data" value="Data Nascimento: " />
<h:column>
<h:inputText id="data"
validatorMessage="Data de nascimento com formato inválido!"
converterMessage="Data de nascimento com formato inválido!"
value="#{pacienteController.paciente.dataNascimento}"
styleClass="edit" size="10" style=" width : 77px;" alt="date">
<f:convertDateTime pattern="dd/MM/yyyy" />
<rich:jQuery selector="#data" query="setMask()" timing="onload" />
</h:inputText>
<rich:message for="data" errorClass="msgErroVertical" />
</h:column>
<h:outputLabel value="Mae:" for="mae" />
<h:column>
<h:inputText id="mae"
value="#{pacienteController.paciente.nomeMae}" styleClass="edit"
required="true" requiredMessage="Campo obrigatório"
style=" width : 432px;" />
<rich:message for="mae" errorClass="msgErroVertical" />
</h:column>
<h:outputLabel value="CID:" for="cid" />
<h:inputText id="cid" value="#{pacienteController.paciente.cid}"
styleClass="edit" style=" width : 103px;" />
<h:outputLabel value="Endereco:" for="endereco" />
<h:inputText id="endereco"
value="#{pacienteController.paciente.logradouro}" styleClass="edit"
style=" width : 432px;" />
<h:outputLabel value="Numero:" for="numero" />
<h:inputText id="numero" value="#{pacienteController.paciente.num}"
styleClass="edit" style=" width : 103px;" />
<h:outputLabel value="Telefone:" for="telefone" />
<h:inputText id="telefone"
value="#{pacienteController.paciente.telefone}"
styleClass="edit" style=" width : 152px;">
<rich:jQuery selector="#telefone"
query="setMask({mask:'([telefone removido]'})" timing="onload" />
</h:inputText>
<h:outputLabel value="Cidade:" for="cidade" />
<h:inputText id="cidade"
value="#{pacienteController.paciente.cidade}" styleClass="edit"
style=" width : 266px;" />
<h:outputLabel value="Convênio:" for="conv" />
<h:column>
<h:selectOneMenu id="conv"
value="#{pacienteController.paciente.convenio.id}"
styleClass="edit" style=" width : 300px;" required="true"
requiredMessage="Campo obrigatório">
<f:selectItem itemValue="" itemLabel="Selecione..." />
<f:selectItems value="#{pacienteController.comboConvenio}" />
</h:selectOneMenu>
<rich:message for="conv" errorClass="msgErroVertical" />
</h:column>
</h:panelGrid>
<h:commandButton value="Salvar"
action="#{pacienteController.actionIncluirAtualizar}" />
</rich:panel>
</h:form>
</ui:composition>
Mas as máscara somente funcionam quando apertou F5 para atualizar a pagina.
Retire a tag <f:view>, vc não devia usa-la quando o framework de templates usado é Facelets. E coloque a a4j:jQuery dentro do form onde vc vai usa-lo.
E
Tirei o <f:view>, mas a tag a4j:jQuery não tem na biblioteca. ainda não funcionou
Desculpe, erro de digitação. Eu queria dizer p/ vc mover a tag a4j:loadScript p/ dentro do <h:form>.
E
Conseguir fazer funciona o jQuery ao inicia a aplicação.
Valeu pela força.
Criado 12 de outubro de 2010
Ultima resposta 14 de out. de 2010
Respostas 6
Participantes 2
Alura POO: o que é programação orientada a objetos? Aprenda os conceitos básicos da programação orientada a objetos, como classes, objetos, herança, encapsulamento e polimorfismo, com exemplos.
Casa do Codigo JavaScript Assertivo: Testes e qualidade de codigo em... Por Gabriel Ramos — Casa do Codigo