jquery com richface.

Entusiasta Java Membro desde: 12/05/2008 08:42:12 Mensagens: 24 Offline

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">

<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>

<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>

This message was edited 3 times. Last update was at 09/06/2008 16:38:50

Debugger Membro desde: 23/05/2008 07:56:02 Mensagens: 52 Offline

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

Abc

Entusiasta Java Membro desde: 12/05/2008 08:42:12 Mensagens: 24 Offline

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

grato

HelloWorld Membro desde: 16/06/2008 20:46:25 Mensagens: 10 Offline

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>

Entusiasta Java Membro desde: 03/04/2008 15:34:27 Mensagens: 18 Offline

Thiago Rodrigues wrote: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>

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?

Thiago Rodrigues wrote: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>

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/

Debugger Membro desde: 06/11/2008 08:33:26 Mensagens: 51 Offline

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

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

fredabcdef wrote: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?

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

Debugger Membro desde: 06/11/2008 08:33:26 Mensagens: 51 Offline

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

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

fredabcdef wrote: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?

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:

Abraços,
Vítor

Smalltalk Membro desde: 09/08/2006 16:34:20 Mensagens: 2 Offline

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.

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.

>

Thread.start() Membro desde: 24/11/2010 09:06:59 Mensagens: 31 Offline

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!

Notícias, artigos e o maior fórum brasileiro sobre Java