-
1. Re: Component to control input with a given mask
marinew Oct 24, 2007 9:47 AM (in response to 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 ? -
2. Re: Component to control input with a given mask
amitev Oct 24, 2007 10:29 AM (in response to marinew)Very useful. I wonder if there is such thing for prototype.
-
3. Re: Component to control input with a given mask
sergeysmirnov Oct 24, 2007 1:31 PM (in response to marinew)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> -
4. Re: Component to control input with a given mask
marinew Dec 12, 2007 12:36 PM (in response to 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. -
5. Re: Component to control input with a given mask
marinew Jan 18, 2008 4:27 AM (in response to 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 -
6. Re: Component to control input with a given mask
sergeysmirnov Jan 18, 2008 10:39 AM (in response to marinew)No, I have no one problem with maskedinput when I tested it.
-
7. Re: Component to control input with a given mask
marinew Jan 18, 2008 11:22 AM (in response to 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 -
8. Re: Component to control input with a given mask
allanws Feb 17, 2008 10:02 AM (in response to marinew)"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?