Jquery com richface

Ai pessoal gostaria de saber como faço para inserir jquery em um projeto jsf com richface,
pois quando eu utilizo no rich face não funciona e nem dar erro, somente roda o projeto e mais nada.

<!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:rich="http://richfaces.ajax4jsf.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">

<head>
<script type="text/javascript" src="jquery/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery/jquery.maskedinput.js"></script>

<link rel="STYLESHEET" type="text/css" href="/css/rich-styles.css"	media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<f:loadBundle basename="messages" var="msg" />
<style type="text/css">
.rich-message-marker img {
	padding-right: 7px;
}

.rich-message-label {
	color: red;
}
</style>
</head>
<body>


<script>
jQuery(function($){
$("#telefone1").mask("(999 9999-9999)″);
$("#telefone2").mask("(999 9999-9999)″);
$("#fax").mask("(999 9999-9999)″);
});
</script>

<f:loadBundle basename="messages" var="msg" />
<a4j:form id="formMenusAjax">
	<h:panelGrid columns="3">

		<h:outputText value="Nome:" />
		<h:inputText label="Nome" id="nome" required="true"
			value="#{clinicaHandler.clinica.nome}" size="50" maxlength="50">

		</h:inputText>
		<rich:message for="nome">
			<f:facet name="passedMarker">
				<h:graphicImage value="/img/passed.gif" />
			</f:facet>
			<f:facet name="errorMarker">
				<h:graphicImage value="/img/error.gif" />
			</f:facet>
		</rich:message>



		<h:outputText value="E-mail:" />
		<h:inputText label="E-mail" id="email"
			value="#{clinicaHandler.clinica.email}" size="30" maxlength="50">
		</h:inputText>
		<rich:message for="email">
			<f:facet name="passedMarker">
				<h:graphicImage value="/img/passed.gif" />
			</f:facet>
			<f:facet name="errorMarker">
				<h:graphicImage value="/img/error.gif" />
			</f:facet>
		</rich:message>

		<h:outputText value="Telefone 1:" />
		<h:inputText label="Telefone 1" id="telefone1" required="true"
			value="#{clinicaHandler.clinica.fone1}" size="15" maxlength="15">

		</h:inputText>
		<rich:message for="telefone1">
			<f:facet name="passedMarker">
				<h:graphicImage value="/img/passed.gif" />
			</f:facet>
			<f:facet name="errorMarker">
				<h:graphicImage value="/img/error.gif" />
			</f:facet>
		</rich:message>

		<h:outputText value="Telefone 2:" />
		<h:inputText label="Telefone 1" id="telefone2"
			value="#{clinicaHandler.clinica.fone2}" size="15" maxlength="15">
		</h:inputText>
		<rich:message for="telefone2">
			<f:facet name="passedMarker">
				<h:graphicImage value="/img/passed.gif" />
			</f:facet>
			<f:facet name="errorMarker">
				<h:graphicImage value="/img/error.gif" />
			</f:facet>
		</rich:message>

		<h:outputText value="Fax:" />
		<h:inputText label="Fax" id="fax"
			value="#{clinicaHandler.clinica.fax}" size="15" maxlength="15">
		</h:inputText>
		<rich:message for="fax">
			<f:facet name="passedMarker">
				<h:graphicImage value="/img/passed.gif" />
			</f:facet>
			<f:facet name="errorMarker">
				<h:graphicImage value="/img/error.gif" />
			</f:facet>
		</rich:message>

		
		<f:facet name="footer">
			<h:panelGroup layout="horizontal">
				<a4j:commandButton value="Incluir" tyle="text-decoration: none;"
					styleClass="rich-button"
					onmouseover="this.className='rich-button-over'"
					onmouseout="this.className='rich-button'"
					onmousedown="this.className='rich-button-press'"
					onmouseup="this.className='rich-button-over"
					action="#{clinicaHandler.create}"
					rendered="#{clinicaHandler.adicionarState}" />
				<a4j:commandButton value="Atualizar" tyle="text-decoration: none;"
					styleClass="rich-button"
					onmouseover="this.className='rich-button-over'"
					onmouseout="this.className='rich-button'"
					onmousedown="this.className='rich-button-press'"
					onmouseup="this.className='rich-button-over"
					action="#{clinicaHandler.update}"
					rendered="#{clinicaHandler.editarState}" />
				<a4j:commandButton value="Limpar" tyle="text-decoration: none;"
					styleClass="rich-button"
					onmouseover="this.className='rich-button-over'"
					onmouseout="this.className='rich-button'"
					onmousedown="this.className='rich-button-press'"
					onmouseup="this.className='rich-button-over"
					action="#{clinicaHandler.clear}" immediate="true"
					rendered="#{clinicaHandler.adicionarState}" />

			</h:panelGroup>


		</f:facet>
	</h:panelGrid>
</a4j:form>


</body>
</html>

:shock: :?:

Bom dia, tente utilizar
a4j:loadScript dentro de um form a4j:form e veja se funciona…

Abc

obriga amigo, mas isso eu já tentei e também não funcionou.

grato

Caso ainda não tenha resolvido seu problema, aí vai a solução, pois acabei de resolver o mesmo problema q vc está tendo, faça o seguinte: coloque o a4j:loadScript dentro do form apenas para o arquivo js do plugin masked-input, não precisa mandar carregar o jquery, pois o proprio framework do rich faces possui e depois faça como segue abaixo para os campos q vc deseja colcoar a máscara:

<h:inputText id=“cpf” value="#{mb.cliente.cpf}">
<rich:jQuery selector="#cpf" query=“mask(‘999.999.999-99’)” timing=“onload” />
</h:inputText>

[quote=Thiago Rodrigues]Caso ainda não tenha resolvido seu problema, aí vai a solução, pois acabei de resolver o mesmo problema q vc está tendo, faça o seguinte: coloque o a4j:loadScript dentro do form apenas para o arquivo js do plugin masked-input, não precisa mandar carregar o jquery, pois o proprio framework do rich faces possui e depois faça como segue abaixo para os campos q vc deseja colcoar a máscara:

<h:inputText id=“cpf” value="#{mb.cliente.cpf}">
<rich:jQuery selector="#cpf" query=“mask(‘999.999.999-99’)” timing=“onload” />
</h:inputText> [/quote]

Estava com o mesmo problema que vc teve. Agora com essa sua dica funcionou. Obrigado Thiago.

Fiz isso só que aqui ta dando esse erro:

java.lang.NoSuchMethodError: org.richfaces.component.util.HtmlUtil.expandIdSelector(Ljava/lang/String;Ljavax/faces/component/UIComponent;Ljavax/faces/context/FacesContext;)Ljava/lang/String;

o que pode ser?

[quote=Thiago Rodrigues]Caso ainda não tenha resolvido seu problema, aí vai a solução, pois acabei de resolver o mesmo problema q vc está tendo, faça o seguinte: coloque o a4j:loadScript dentro do form apenas para o arquivo js do plugin masked-input, não precisa mandar carregar o jquery, pois o proprio framework do rich faces possui e depois faça como segue abaixo para os campos q vc deseja colcoar a máscara:

<h:inputText id=“cpf” value="#{mb.cliente.cpf}">
<rich:jQuery selector="#cpf" query=“mask(‘999.999.999-99’)” timing=“onload” />
</h:inputText> [/quote]

Muito bom! Me salvou aqui… Valeu mesmo!

Queria aproveitar e contribuir com uma informação extra. Se o campo que você quer formatar não é carregado inicialmente com a página, mas aparece depois a partir de renderização dinâmica via AJAX, troque timing=“onload” por timing=“immediate”.

Achei ainda um caso mais complicado e talvez interesse a alguém… Eu fiz uma página de formulário de cadastro, que eu usei tanto para novos cadastros quanto para alteração de cadastro, na qual eu coloquei um dataTable que mostra um campo para cada telefone numa List que fica no Bean. Quando o usuário clicasse no “+”, eu adicionava um objeto Telefone na List e mandava re-renderizar a tabela, daí aparecia mais um campo.

Portanto, quando eu abria esta página para editar um cadastro, alguns campos já apareciam na abertura da página (portanto, eu deveria usar timing=“onload”) enquanto outros poderiam ser adicionados dinamicamente (e eu deveria usar timing=“immediate”). No final, usei os 2, só que especificando via rendered="" que o “onload” era quando o ID do telefone não era nulo (ou seja, já estava no BD e, portanto, era carregado com a página) e que o “immediate” era quando o ID era nulo (ou seja, foi adicionado um novo telefone, vazio, dinamicamente).

O código é este a seguir, caso alguém se interesse. Nessa aplicação estou usando JBoss Seam, daí as tags <s:… />.

<s:decorate id="telephonesDecoration" template="/resources/templates/#{applicationInformation.decorator}/formfield.xhtml"> <ui:define name="label"><h:outputText value="#{messages['manageInstitutions.form.telephones']}" /></ui:define> <s:fragment rendered="#{telephones.size != 0}"> <div class="float"> <h:dataTable value="#{telephones}" var="telephone"> <h:column> <div class="innerError"><h:message for="telephone" /></div> <h:inputText id="telephone" value="#{telephone.number}" size="15" required="true" disabled="#{readOnly}"> <rich:jQuery selector="#telephone" query="mask('(99) 9999-9999')" timing="onload" rendered="#{telephone.id != null}" /> <rich:jQuery selector="#telephone" query="mask('(99) 9999-9999')" timing="immediate" rendered="#{telephone.id == null}" /> </h:inputText> </h:column> <h:column> <h:selectOneMenu id="contactType" value="#{telephone.type}" required="true" disabled="#{readOnly}"> <s:selectItems var="type" value="#{applicationInformation.contactTypes}" label="#{type.type}" /> <s:convertEntity /> </h:selectOneMenu> </h:column> <h:column rendered="#{! readOnly}"> <a4j:commandLink action="#{manageInstitutionsAction.removeTelephone}" reRender="telephonesDecoration,nameDecoration,typeDecoration" disabled="#{readOnly}" bypassUpdates="true"><h:graphicImage value="/resources/templates/#{applicationInformation.decorator}/images/iconRemove.png" title="#{messages['manageInstitutions.button.removeTelephone']}" /></a4j:commandLink> </h:column> </h:dataTable> </div> <s:div styleClass="reverseFloat" rendered="#{! readOnly}"><a4j:commandLink action="#{manageInstitutionsAction.newTelephone}" reRender="telephonesDecoration,nameDecoration,typeDecoration" disabled="#{readOnly}"><h:graphicImage value="/resources/templates/#{applicationInformation.decorator}/images/iconAdd.png" title="#{messages['manageInstitutions.button.anotherTelephone']}" /></a4j:commandLink></s:div> </s:fragment> <s:fragment rendered="#{telephones.size == 0}"> <div class="float"><h:outputText value="#{messages['manageInstitutions.text.noTelephones']}" /></div> <s:div styleClass="reverseFloat" rendered="#{! readOnly}"><a4j:commandLink action="#{manageInstitutionsAction.newTelephone}" reRender="telephonesDecoration" bypassUpdates="true" disabled="#{readOnly}"><h:graphicImage value="/resources/templates/#{applicationInformation.decorator}/images/iconAdd.png" title="#{messages['manageInstitutions.button.newTelephone']}" /></a4j:commandLink></s:div> </s:fragment> </s:decorate>

Abraços,

Vítor Souza
http://labes.inf.ufes.br/vsouza/

Pessoal estou usando JSF + RichFaces também, porém ainda nao entendi como usar o JQuery:


<h:inputText id="cpf" value="#{mb.cliente.cpf}"> 
<rich:jQuery selector="#cpf" query="mask('999.999.999-99')" timing="onload" /> 
</h:inputText>

O JQuery coloca a máscara no momento em que o usuario está digitando?

[quote=fredabcdef]Pessoal estou usando JSF + RichFaces também, porém ainda nao entendi como usar o JQuery:


<h:inputText id="cpf" value="#{mb.cliente.cpf}"> 
<rich:jQuery selector="#cpf" query="mask('999.999.999-99')" timing="onload" /> 
</h:inputText>

O JQuery coloca a máscara no momento em que o usuario está digitando?[/quote]

No momento indicado em timing (no ex. acima, quando a página é carregada), ele avisa ao jQuery que aquele campo tem uma máscara. Daí quando você entra no campo (onFocus) ele mostra a máscara (no ex.: ___.___._-) e controla o que você digita (no ex., se você digitar letras, ele não aceita). Quando você deixa o campo (onBlur), ele verifica se o preenchimento está completo: se estiver, bem, se não ele apaga tudo.

Pelo menos é assim que está funcionando aqui comigo.

Abraços,

Vítor

Ahhh ok.
Eu consegui fazer funcionar aqui, mas precisei importar o javaScript do JQuery.

 <a4j:loadScript src="../js/jquery.js">
      <h:inputText id="cpf2" value="#{aplicacao.aplicacao.CPFCNPJ}"> 
       <r:jQuery selector="#cpf2" query="mask('999.999.999-99')" timing="onload" /> 
      </h:inputText>
     </a4j:loadScript>

Já que estou usando RichFaces não deveria ser necessário importar o JavaScript não concordam?

[quote=fredabcdef]Ahhh ok.
Eu consegui fazer funcionar aqui, mas precisei importar o javaScript do JQuery.

 <a4j:loadScript src="../js/jquery.js">
      <h:inputText id="cpf2" value="#{aplicacao.aplicacao.CPFCNPJ}"> 
       <r:jQuery selector="#cpf2" query="mask('999.999.999-99')" timing="onload" /> 
      </h:inputText>
     </a4j:loadScript>

Já que estou usando RichFaces não deveria ser necessário importar o JavaScript não concordam?

[/quote]

Também estava acontecendo isso comigo, mas daí eu troquei <h:form> por a4j:form e passou a funcionar.

Meu formulário está começando assim:

<a4j:form> <a4j:loadScript src="/resources/scripts/jquery.maskedinput-1.2.pack.js" />

Abraços,
Vítor

Olá amigos… já li esse fórum várias vezes e ainda não consigo fazer meu jsf funcionar… será que alguém pode me ajudar?

aí vai o meu código…

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<html>
<head>
<title>Máscaras com JQuery</title>
<script type="text/javascript" src="/jsf/resources/jquery.maskedinput-1.2.1.js"></script>
</head>
<body>
	<f:view>
		<a4j:form>
			<a4j:loadScript src="/resources/scripts/jquery.maskedinput-1.2.pack.js"  />  
			<h:outputText value="Conta:" />
			<h:selectOneMenu id="CODCONTA" value="#{bLancamento.lancamento.conta.conta}">
				<f:selectItems id="ITEMCONTA" value="#{bConta.comboConta}" />
			</h:selectOneMenu>
			<br />

			<h:outputText value="Valor: " />
			<h:inputText id="VALOR" value="#{bLancamento.lancamento.valor}" immediate="true" required="false">
				<rich:jQuery selector="#VALOR" query="mask('9999')" timing="immediate" />
			</h:inputText>
			<br />

			<h:outputText value="Histórico:" />
			<h:inputTextarea id="LANCAMENTO" value="#{bLancamento.lancamento.historico}"></h:inputTextarea>
	
		</a4j:form>
	</f:view>
</body>
</html>

Pessoal,

Apenas pra deixar o registro, pois pode ajudar alguém...

Encontrei o mesmo problema pra aplicar uma mascara de CNPJ com campo sendo atualizado por AJAX.

A forma que vocês postaram, eu consegui fazer funcionar, porém ao realizar a edição de um registro existente a mascará deixava de funcionar, não aplicando mais ao campo.

Consegui fazer funcionar de uma forma um pouco diferente da proposta por vocês, vou colocar o código abaixo como sendo uma alternativa.

&lt;a4j:form&gt;  
    &lt;a4j:loadScript src="/resources/scripts/jquery.maskedinput-1.2.pack.js" /&gt;
        &lt;h:inputText id="txtCNPJ" value="#{companyController.cnpj}" maxlength="19" label="CNPJ" style="width:100%;" onfocus="applyMask(this)" &gt;
            &lt;rich:jQuery name="applyMask" query="mask('999.999.999/9999-99')" timing="onJScall" /&gt;
        &lt;/h:inputText&gt;
&lt;/a4j:form

Dessa forma a máscara será aplicada mesmo que o campo esteja sendo editado e as informações que previamente estavam cadastradas incorretamente, não prejudicarão o funcionamento dela, porém, nesse caso a máscara vai mostrar o campo em branco.

Qualquer duvida estou à disposição.

Abraços.

>

revivendo…
gente estou com o mesmo problema que vcs tiveram e não consigo fazer funcionar de forma alguma ja tentei de diversas formas mas sem sucesso.

<?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:stella="http://stella.caelum.com.br/faces"
    xmlns:rich="http://richfaces.org/rich">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 </head>
     <ui:composition template="/template/template.xhtml">
    	<ui:define name="corpo"> 
			<a4j:form> 
				<rich:messages />
	
				 <fieldset>
			        <legend>Cadastro de Cliente</legend>
				        <a4j:region id="regiaoAjax">
							<a4j:status id="sts">
			                    <f:facet name="start">
			            		     <h:graphicImage value="/images/ajax-loader.gif" />
			               		</f:facet>
			                </a4j:status>
			            </a4j:region>
						<h:panelGrid columns="2" id="inputs">
							<h:outputLabel for="nome" value="Nome: "  />
							<h:inputText id="nome" value="#{clienteController.cliente.nome}" styleClass="edit" size="40" />
							
								<h:outputLabel for="cpf" value="CPF: "  />
							<a4j:loadScript src="/resources/jquery.maskedinput-1.2.pack.js">
								<h:inputText id="cpf" value="#{clienteController.cliente.cpf}" styleClass="edit" size="11">
									<rich:jQuery selector ="#cpf" query="mask('999.999.999-99')" timing="onload" />	
								<stella:validateCPF formatted="true"/>		
								</h:inputText>
							</a4j:loadScript>
								
							<h:outputLabel for="tpcliente" value="Tipo Cliente: " />
							<h:selectOneMenu id="tpcliente" value="#{clienteController.cliente.tipoCliente.id}">
								<f:selectItems value="#{clienteController.tipoclientes}" />
							</h:selectOneMenu>
							<h:commandButton value="Inserir" action="#{clienteController.inserir}" status="sts" reRender="inputs" styleClass="botoes"/>
							<h:commandButton value="Voltar" immediate="true" action="#{clienteController.voltar}" styleClass="botoes"/>
				    	</h:panelGrid>
				    </fieldset>
			</a4j:form>
		</ui:define>
    </ui:composition>
</html>

quem poder ajuda aew!!!
Obrigado!

Bom, estive com o mesmo problema, tentei todas as soluçõe dos outros tópicos e nada, até que finalmente consegui fazer a mascara com o jQuery funcionar, vou colocar a minha solução porque acredito que deva ter muita gente penando pra fazer isso funcionar no richfaces:

todos os tópicos falavar pra fazer assim:

<h:inputText id="cpf" value="#{clienteController.cliente.cpf}" styleClass="edit" size="11"> <rich:jQuery selector ="#cpf" query="mask('999.999.999-99')" timing="onload" /> </h:inputText>

Mas na verdade a tag rich:jQuery não pode estar dentro da tag h:inputText, o correto seria:

<h:inputText id="cpf" value="#{clienteController.cliente.cpf}" styleClass="edit" size="11"/>
<rich:jQuery selector ="#cpf" query="mask('999.999.999-99')" timing="onload" />	

Pra mim funcionou, espero ter ajudado,
importante lembrar de carregar o maskedinput, o plugin do jquey não é necessário

vlw!!!

Stiff, não sei se já solucionou seu problema ou não, mas o seu código está com um pequeno problema, vc colocou o inputText como filho de um a4j:loadScript. Tente fazer assim:

<a4j:loadScript src="/resources/jquery.maskedinput-1.2.pack.js" />  

<h:inputText id="cpf" value="#{clienteController.cliente.cpf}" styleClass="edit" size="11">  
   <rich:jQuery selector ="#cpf" query="mask('999.999.999-99')" timing="onload" />     
   <stella:validateCPF formatted="true"/>          
</h:inputText>

Abçs!

Eu estava com o mesmo problema e a solução foi usar a sugestão de eduardo.cerqueira
Pra mim deu certo. Obrigado.

[quote=eduardo.cerqueira]Pessoal,

Apenas pra deixar o registro, pois pode ajudar alguém...

Encontrei o mesmo problema pra aplicar uma mascara de CNPJ com campo sendo atualizado por AJAX.

A forma que vocês postaram, eu consegui fazer funcionar, porém ao realizar a edição de um registro existente a mascará deixava de funcionar, não aplicando mais ao campo.

Consegui fazer funcionar de uma forma um pouco diferente da proposta por vocês, vou colocar o código abaixo como sendo uma alternativa.

&lt;a4j:form&gt;  
    &lt;a4j:loadScript src="/resources/scripts/jquery.maskedinput-1.2.pack.js" /&gt;
        &lt;h:inputText id="txtCNPJ" value="#{companyController.cnpj}" maxlength="19" label="CNPJ" style="width:100%;" onfocus="applyMask(this)" &gt;
            &lt;rich:jQuery name="applyMask" query="mask('999.999.999/9999-99')" timing="onJScall" /&gt;
        &lt;/h:inputText&gt;
&lt;/a4j:form

Dessa forma a máscara será aplicada mesmo que o campo esteja sendo editado e as informações que previamente estavam cadastradas incorretamente, não prejudicarão o funcionamento dela, porém, nesse caso a máscara vai mostrar o campo em branco.

Qualquer duvida estou à disposição.

Abraços.

>[/quote]

Galera desculpa reabir o tópico, mas eu tinha q agradecer essa dica salvou minha vida. Eu estava a dois dias tentando fazer isso… Valeu eduardo.cerqueira!

Não sei se todo mundo conseguiu resolver este problema, então ai vai a minha contribuição:

  • Realmente não precisa importar a lib do jquery pois a mesma já é incluída pelo JSF;
  • Ao importar a biblioteca do maskedinput, não usar caminhos relativos desta forma:
<a4j:loadScript src="../../js/jquery.maskedinput-1.2.1.js"></a4j:loadScript>

Ao invés disso usar o caminho a partir da raiz:

<a4j:loadScript src="/js/jquery.maskedinput-1.2.1.js"></a4j:loadScript>
  • E como o colega colocou, não colocar o <rich:jQuery…" dentro da tag “<h:inputText…”. Colocar antes ou depois. Tanto faz (mas depois fica mais legível).

Ex.:

    <h:inputText id="cpf" value="#{clienteController.cliente.cpf}" styleClass="edit" size="11"/>  
    <rich:jQuery selector ="#cpf" query="mask('999.999.999-99')" timing="onload" />    

Espero ter ajudado.