JQuery com jsf e richfaces - mascara jquery.maskedinput-1.2.1.js não funciona

Stiff · Dezembro 20, 2010, 1:52pm

<?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: "  />
								<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>
						
							<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>

onde estou errando???

v1c70r_f · Dezembro 20, 2010, 2:00pm

Carinha, coloca o fonte do template que está usando aí o/

Abraço.

robson.simonassi · Dezembro 20, 2010, 2:47pm

Opah

Amigo estou com mesmo problema, qualuqer noticia, aviso você.

Abraço

Stiff · Dezembro 20, 2010, 2:47pm

[quote=v1c70r_f]Carinha, coloca o fonte do template que está usando aí o/

Abraço.[/quote]

<?xml version="1.0" encoding="UTF-8"?>
<!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>
	<link rel="StyleSheet" type="text/css" href="/ProjetoLavaJato/style/estilos.css" media="screen" />
	<script type="text/javascript" src="/ProjetoLavaJato/resources/jquery.maskedinput-1.2.1.js"></script>  
</head>

<body>
	<div id="corpo">
		<ui:insert name="corpo">
			Conteúdo
		</ui:insert>
	</div>
</body>
</html>

pronto…

robson.simonassi · Dezembro 20, 2010, 2:51pm

Já tentou usar

a4j:loadScript

davisnog · Dezembro 20, 2010, 2:52pm

tenta isso, em vez de:

<rich:jQuery selector="#cpf" query="mask('999.999.999-99')" timing="onload"/>

Substitui por isso:

<rich:jQuery selector="input[id$='cpf'" query="mask('999.999.999-99')" timing="onload"/>

Por algum motivo, o # não funciona com richfaces + jquery.

Stiff · Dezembro 20, 2010, 2:55pm

[quote=davisnog]tenta isso, em vez de:

<rich:jQuery selector="#cpf" query="mask('999.999.999-99')" timing="onload"/>

Substitui por isso:

<rich:jQuery selector="input[id$='cpf'" query="mask('999.999.999-99')" timing="onload"/>

Por algum motivo, o # não funciona com richfaces + jquery.[/quote]

blz vou tentar… valeu!

@robson.simonassi
ja tentei mas não deu em nada

robson.simonassi · Dezembro 20, 2010, 2:58pm

Blza

Rich deve tá bugado por que na documentação da jboss diz que isto ROLA.

Stiff · Dezembro 20, 2010, 3:00pm

mais alguma dica… não deu em nada também =/

robson.simonassi · Dezembro 20, 2010, 3:04pm

Este Link você já viu:

http://www.guj.com.br/posts/list/136370.java

Stiff · Dezembro 20, 2010, 3:10pm

[quote=robson.simonassi]Este Link você já viu:

http://www.guj.com.br/posts/list/136370.java[/quote]

pior que vi mas também não funcionou… tou p da vida por não conseguir resolver um problema tão simples em tese.

Stiff · Dezembro 20, 2010, 3:16pm

<?xml version="1.0" encoding="UTF-8"?>
<!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">

<head>
	<link class="component" href="/ProjetoLavaJato/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf*.faces" rel="stylesheet" type="text/css" /><link class="component" href="/ProjetoLavaJato/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf*.faces" media="rich-extended-skinning" rel="stylesheet" type="text/css" /><script src="/ProjetoLavaJato/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript.jsf*.faces" type="text/javascript"></script><script src="/ProjetoLavaJato/a4j/g/3_3_3.Finalorg/ajax4jsf/javascript/scripts/form.js.jsf*.faces" type="text/javascript"></script><link class="component" href="/ProjetoLavaJato/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/css/msg.css.jsf*.faces" rel="stylesheet" type="text/css" /><link class="component" href="/ProjetoLavaJato/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/css/msgs.css.jsf*.faces" rel="stylesheet" type="text/css" /><script src="/ProjetoLavaJato/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/jquery/jquery.js.jsf*.faces" type="text/javascript"></script><script type="text/javascript">window.RICH_FACES_EXTENDED_SKINNING_ON=true;</script><script src="/ProjetoLavaJato/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/skinning.js.jsf*.faces" type="text/javascript"></script><link rel="StyleSheet" type="text/css" href="/ProjetoLavaJato/style/estilos.css" media="screen" />
	<script type="text/javascript" language="javascript" src="/ProjetoLavaJato/resources/jquery.maskedinput-1.2.1.js"></script>   
</head>

<body>
	<div id="corpo"><form id="j_id4" name="j_id4" method="post" action="/ProjetoLavaJato/formCliente.jsf"><dl id="j_id4:j_id5" class="rich-messages" style="display: none; "><dt></dt></dl>
				 <fieldset>
			        <legend>Cadastro de Cliente</legend><span id="j_id4:regiaoAjax:status"><span id="j_id4:regiaoAjax:status.start" style="display: none"><img src="/ProjetoLavaJato/images/ajax-loader.gif" /></span><span id="j_id4:regiaoAjax:status.stop"></span></span><table id="j_id4:inputs">
<tbody>
<tr>
<td><label for="j_id4:nome">
Nome: </label></td>
<td><input id="j_id4:nome" type="text" name="j_id4:nome" class="edit" size="40" /></td>
</tr>
<tr>
<td><label for="j_id4:cpf">

CPF: </label></td>
<td><input id="j_id4:cpf" type="text" name="j_id4:cpf" class="edit" size="11" /></td>
</tr>
<tr>
<td><label for="j_id4:tpcliente">
Tipo Cliente: </label></td>
<td><select id="j_id4:tpcliente" name="j_id4:tpcliente" size="1">	<option value="1">OURO</option>
	<option value="2">PRATA</option>
	<option value="3">BRONZE</option>

</select></td>
</tr>
<tr>
<td><input type="submit" name="j_id4:j_id13" value="Inserir" class="botoes" /></td>
<td><input type="submit" name="j_id4:j_id14" value="Voltar" class="botoes" /></td>
</tr>
</tbody>
</table>

				    </fieldset><input type="hidden" autocomplete="off" name="j_id4" value="j_id4" /><input type="hidden" autocomplete="off" name="autoScroll" value="" /><input type="hidden" autocomplete="off" name="j_id4:_link_hidden_" value="" /><input type="hidden" autocomplete="off" name="j_id4:j_idcl" value="" /><script type="text/javascript">function clear_j_id4() {
_clearJSFFormParameters('j_id4','',['j_id4:_link_hidden_','j_id4:j_idcl']);
}
function clearFormHiddenParams_j_id4(){clear_j_id4();}
function clearFormHiddenParams_j_id4(){clear_j_id4();}
clear_j_id4();</script><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-775531924111207496:5988055061661842733" autocomplete="off" /></form>
	</div>
</body>
</html>

Olha o código que está sendo gerado… mas ta faltando o JQuery da validação do CPF

raf4ever · Dezembro 20, 2010, 4:55pm

Bem,vou mostrar do jeito que eu faço:

&lt;c:set var="ctx" value="#{facesContext.externalContext.request.contextPath}" /&gt;
&lt;script type="text/javascript" src="#{ctx}/js/jquery.maskedinput-1.2.1.js"&gt;&lt;/script&gt;

Stiff · Dezembro 22, 2010, 4:53pm

[quote=raf4ever]Bem,vou mostrar do jeito que eu faço:

<c:set var="ctx" value="#{facesContext.externalContext.request.contextPath}" /> <script type="text/javascript" src="#{ctx}/js/jquery.maskedinput-1.2.1.js"></script>[/quote]

Só mesmo para constar, tentei de todas as formas possíveis (eu acho) e não funcionou, acabei deixando prá lá… mas o que ocorre realmente, o local onde está o jquery é encontrado, pois eu vejo o codigo gerado da minha tela e la no link quando clico consigo abrir o arquivo, ou seja, ele encontra o local, pois bem acredito que esteja dando algum tipo de incompatibilidade com as tecnologias que estou usando.

Kleber-rr · Setembro 19, 2011, 10:22am

eae amigo, resolveu teu problema?

mairon · Novembro 25, 2012, 12:38pm

meio tarde, mas pode ajudar alguém futuramente.

atenção no: var $j = jQuery.noConflict();

a variável $j faz parar de dar conflito. nisso, ao invés de se usar $ que se utiliza normalmente, use $j.


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

var $j = jQuery.noConflict();
$j(document).ready(function(){
	  $j(".cpf").mask("999.999.999-99");
	  $j(".rg").mask("99.999.999-9");
	  $j(".cep").mask("999.999-999");	
	  $j(".telefone").mask("(99)9999-9999");	
	  $j(".celular").mask("(99)9999-9999");
	  	
});

system · Dezembro 30, 2015, 6:35am

JQuery com jsf e richfaces - mascara jquery.maskedinput-1.2.1.js não funciona

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI