GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

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

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

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

Abraço.

Opah

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

Abraço

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

Já tentou usar

a4j:loadScript

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

Blza

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

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

Este Link você já viu:

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

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

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

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;

[quote=raf4ever]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; [/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.

eae amigo, resolveu teu problema?

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");
	  	
});
//