Component to control input with a given mask

[marinew]

Hello,

I am working with MyFaces 1.1.5 + Tomahawk 1.1.6 + RichFaces 3.1.0.

I am looking for an inputText component that will control user input with a mask.
For example, if I define the following mask : "99/99/9999"
Then the user will see an input field containing "__/__/____"
and when he will type in this field, he will only have to type numbers, without having to type "/" characters.

Does anybody know how I could do that ?

I found a "JQuery plugin" at http://digitalbush.com/projects/masked-input-plugin, and I found <rich:jQuery> tag in RichFaces library. But I never used JQuery.
Could you tell me if it is possible to do something with this, and put me on the road or give me an example ?

Thanks.

[marinew]

OK, here is how to use "Masked Input" jQuery plugin with <rich:jQuery> component that is available since RichFaces 3.1.2.

Download the plugin here : http://digitalbush.com/projects/masked-input-plugin"

In html head :

<script type='text/javascript' src='<%= request.getContextPath()%>/js/jquery.maskedinput-1.1.1.pack.js'></script>

In html body :

<t:inputText id="dateNaissance" value="#{monBean.dateNaissance}">
 <f:convertDateTime pattern="dd/MM/yyyy"/>
</t:inputText>

<a4j:loadScript src="resource://jquery.js"/>
<rich:jQuery selector="#monForm:dateNaissance" timing="onload" query="mask('99/99/9999')" />

Warning : I had to put <t:input> BEFORE <rich:jQuery> in the page.


There remain one problem :

If I use the following command instead of the other one

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

I have the following JavaScript error :

jQuery("#monForm\\:dateNaissance").mask is not a function

But when I look at generated HTML, the JavaScript is correctly inserted in head.
Any idea about why this doesn't work ?
Could it be a bug ? Or a problem in order in which things are done by RichFaces ?

[amitev]

Very useful. I wonder if there is such thing for prototype.

[sergeysmirnov]

1. you do not have to define <a4j:loadScript src="resource://jquery.js"/> explicitly. It is already there.

2. it should be:
selector="#dateNaissanc"
or
selector="#monForm\\:dateNaissance"
but not
selector="#monForm:dateNaissance"

3. put your <a4j:loadScript src="/js/jquery.maskedinput-1.1.1.pack.js"/> somewhere after your <rich:jQuery>

[marinew]

Hello,

Thanks for your help SergeySmirnov, and sorry for answering only now !
I just realized that I don't receive mail when someone answer to my posts !

I will try your suggestion.

[marinew]

Hello,

Back to this subject. I had not time to try what you told me, SergeySmirnov, until today.

FIRST : I just tested that, but I have a JavaScript error on page load :

$.fn has no properties
(no name)(function())jquery.maskedinput.js (line 32)
[Break on this error] $.fn.caret=function(begin,end){

Here is the code I'm using :

(...)
 <t:inputText id="dateHeureRdv" value="#{priseRdvDepuisAgendaForm.dateHeureRdv}"
 title="#{msgR.PriseRdvDepuisAgenda_dateHeureRdvToolTip}"
 required="true" onfocus="activerMaskDate();">
 <f:convertDateTime pattern="dd/MM/yyyy HH:mm" timeZone="#{sessionUtilisateurBean.timeZone}"/>
 </t:inputText>
(...)
<rich:jQuery selector="#dateHeureRdv" timing="onJScall" query="mask('99/99/9999 99:99')" name="activerMaskDate" />
<a4j:loadScript src="#{ress.JS_MaskedInput}"/>

I use RichFaces 3.1.3 GA and JQuery MaskedInput 1.1.2.


Wouldn't it have something to do with what is written in RichFaces doc :
"Remember to use jQuery() function instead of $(), as soon as jQuery works without conflicts with prototype.js." ?

You said (http://jboss.com/index.html?module=bb&op=viewtopic&t=125972) that you made it work nicely, without having to modify the plugin. Could you please tell me how you did it, or what is wrong in my example ?


SECONDLY : if I include manually the JS file, it works, so I was able to test it. Strangely, it works very well in some cases. But in other cases, I can't figure out why, there is a bug, and it become impossible to modify the input. For example, I use "99:99" mask.
- I type "10:20" in input => OK
- I go to another input, and come back to the first one.
- When I type in the first character, I should be able then to type the second. But instead of that, the caret is placed on last character or 2/3 characters later, so I will never be able to type in the second character !
Did you have such a problem ?
I feel the problem happen when the input doesn't exist at load time, but is introduced in page through a "reRender" ajax command...

Thanks !
Marine

[sergeysmirnov]

No, I have no one problem with maskedinput when I tested it.

[marinew]

Do you still have the code you tested ?
I don't understand : after doing tests today, I can't get it work anymore, even with old method (manually including scripts) !

The only thing I changed, is that I replaced RichFaces 3.1.2 by 3.1.3...
I would like to keep 3.1.3 and get masked-input work :-(

Are there some parameters to modify related to rich:jQuery component ?
Any help ?

Thanks

[allanws]

"marinew" wrote:
Do you still have the code you tested ?
I don't understand : after doing tests today, I can't get it work anymore, even with old method (manually including scripts) !

The only thing I changed, is that I replaced RichFaces 3.1.2 by 3.1.3...
I would like to keep 3.1.3 and get masked-input work :-(

Are there some parameters to modify related to rich:jQuery component ?
Any help ?

Thanks

I could not get it work too. Any other help?