[RESOLVIDO] JQuery mask + Dialog Primefaces - Telefone SP 9 dígitos

Front-end
#1

Olá pessoal, tudo bom?

Com as mudanças dos telefones de SP para 9 dígitos, preciso fazer uma alteração nos campos telefone… como não consegui/encontrei uma solução boa com o inputMask do Primefaces, pesquisei um pouco e encontrei uma solução muito bacana com o JQuery mask (http://www.igorescobar.com/blog/2012/07/29/mascara-javascript-para-os-novos-telefones-de-sao-paulo/)

Essa solução funciona perfeitamente, menos num dialog do Primefaces…
Ele simplesmente nao funciona… alguém já teve algum problema com Jquery e dialog do primefaces??

ou se alguém tiver alguma outra solução para o telefone com 9 dígitos, também será bem-vinda! :smiley:
Obrigado!!

#2

Bom dia.

Encontrei um exemplo neste link http://www.igorescobar.com/blog/.
e usei com o PrimeFaces.
O código ficou assim.

<h:head>
		<script type="text/javascript"
			src="#{request.contextPath}/js/jquery.mask.js"></script>
		<script type="text/javascript">
$(function() {
$('.date').mask('99/99/9999');
$('.time').mask('99:99:99');
$('.date_time').mask('99/99/9999 99:99:99');
$('.cep').mask('99999-999');
$('.phone').mask('9999-9999');
$('.phone_with_ddd').mask('(99) 9999-9999');
$('.phone_us').mask('(999) 999-9999');
$('.mixed').mask('AAA 000-S0S');
$('.cep_with_callback').mask('00000-000', {onComplete: function(cep) {
console.log('Mask is done!:', cep);
},
onKeyPress: function(cep, event, currentField, options){
console.log('An key was pressed!:', cep, ' event: ', event, 'currentField: ', currentField.attr('class'), ' options: ', options);
}
});
$('.crazy_cep').mask('00000-000', {onKeyPress: function(cep){
var masks = ['00000-000', '0-00-00-00'];
mask = (cep.length>7) ? masks[1] : masks[0];
$('.crazy_cep').mask(mask, this);
}});
$('.cpf').mask('999.999.999-99', {reverse: true});
$('.money').mask('000.000.000.000.000,00', {reverse: true});
$('.sp_celphones').mask('(00) 0000-0000',
{onKeyPress: function(phone, event, currentField, options){
	 var new_sp_phone = phone.match(/^(\(11\) 9(5[0-9]|6[0-9]|7[01234569]|8[0-9]|9[0-9])[0-9]{1})/g);
     new_sp_phone ? $(currentField).mask('(00) 00000-0000', options) : $(currentField).mask('(00) 0000-0000', options)
}}
);
});
</script>
</h:head>
[url]

<h:outputLabel value="Celular:" for="celular" />
<h:inputText id="celular" styleClass="sp_celphones"
								value="#{pacienteController.paciente.celular}" size="14" />
							<br />

Assim funcionou corretamente.

#3

Desculpa pela demora amigo!!! eu estava tentando resolver outros problemas…

mas enfim, esse seu código funcionou num p:dialog??

#4

Bom dia pcsantana.
Fiz um teste em uma pagina e funcionou sim em p:dialog.

<h:head>  
        <script type="text/javascript"  
            src="#{request.contextPath}/js/jquery.mask.js"></script>  
        <script type="text/javascript">  
</h:head>

Um botão para abrir o p:dialog

<p:commandButton value="Open" oncomplete="dialogTeste.show();"
					update=":formteste" />

<p:dialog header="Dialog de Teste" widgetVar="dialogTeste" modal="true"
			resizable="false" showEffect="fade" hideEffect="explode" width="200">
			<h:form id="formteste">
				<h:outputScript>
				$('.sp_celphones')
			.mask(
					'(00) 0000-0000',
					{
						onKeyPress : function(phone, event, currentField,
								options) {
							var new_sp_phone = phone
									.match(/^(\(11\) 9(5[0-9]|6[0-9]|7[01234569]|8[0-9]|9[0-9])[0-9]{1})/g);
							new_sp_phone ? $(currentField).mask(
									'(00) 00000-0000', options) : $(
									currentField).mask('(00) 0000-0000',
									options)
						}
					});	
			</h:outputScript>
				<h:panelGrid columns="2">
					<h:outputLabel value="Celular:" for="celular" />
					<h:inputText id="celular" styleClass="sp_celphones" size="14" />
				</h:panelGrid>
			</h:form>
		</p:dialog>

Este código funcionou, espero que ajude.

#5

Obrigadooo mesmo Edson!!!

o segredo foi por o script dentro do dialog também…
eu estava colocando apenas na página, pensei que deveria funcionar assim…

Mas obrigadao, resolveu o meu problema!! :smiley:

Abraçoos!

#6

De nada.
Demorei um tempo para descobrir isso, mas funcionou.

#7