Richfaces event with JQuery masked input

[francof]

Sorry to post here, not sure if I could get any help from a jQuery forum because of the nature of the problem.

I know some RF users have been using different jQuery plugins for masked inputs. I am using this one http://www.meiocodigo.com/projects/meiomask/
and I highly recommend it.

It works great on any input ONLY where there is no attached a4j events.

Let me explain with my code-

<!-- Set up mask -->
<script type="text/javascript" src="#{contextPath}/js/jquery/plugins/jquery.meiomask.compressed.js" ></script>

<script type="text/javascript">
 // Use jQuery via jQuery(...)
 jQuery(document).ready(function(){

 //use meiomask to set input masks
 jQuery.mask.masks = jQuery.extend(jQuery.mask.masks,{
 msrpmask:{ mask: '99.999999', type : 'reverse'},
 lsppgmask:{ mask: '99.999999', type : 'reverse'},
 inventorymask:{ mask: '999999', type : 'reverse'}
 });

 //then call this to activate masks lib

 jQuery('input:text').setMask();


 });
</script>

Now here is the definition of my masked input in my xhtml page

<s:decorate id="msrpDecoration" >
<h:inputText id="msrp" value="#{itemHome.instance.msrp}"
 alt="msrpmask" >
 <a4j:support event="onblur"
 reRender="msrpDecoration"
 bypassUpdates="true"
 ajaxSingle="true"/>
</h:inputText>
</s:decorate>

I need the a4j:support event to match a validation on my model that will not allow a zero value in this field.

Here is the behavior I am experiencing

Page loads the first time, the mask works great, only decimal numbers are allowed. However, once I tab out of the field and go back in, the mask is lost. I can now type anything. If I remove the a4j event, then the mask always works.

I am hoping someone here is also using a masked input and knows something I am missing here. Or perhaps some tips from RF team.

Regards and thanks in advance
Franco

[sergeysmirnov]

I have replayed several times about jQuery masked plugin (not exactly meiocodigo.com one). Even the example was made. Unfortunately, jboss.org is not a place where it is possible to find something already posted :-(


When the part of the page is re-rendered, it is replaced. So, if you have some thing attached to the DOM node, you have to re-attach it. I.e. you have to recall setmask() from the oncomplete of the a4j:support (or other places if you re-render the input from there)

P.S. Use < a4j:loadScript > instead of < script > for plugin loading

[francof]

Thank you Sergey

I am going to search this forum again for the example, but I think I know what to do.

Best Regards
Franco

[francof]

Sergey,

I just got around to this, it worked like a charm with your tip.

I moved the mask initialization for my inputs into a JS function and call the function in the jQuery ready and oncomplete of my a4j:support event.

I did not have to use a4j:loadScript to load the mask plugin. Just wanted to get your thoughts on that.

BTW, no offense - The user guide and FAQ's are great, but it'd be nice to see a book with some nice practical examples. I know Max was writing one, is that complete yet?


Regards
Franco

[sergeysmirnov]

Max's book is already out: http://www.apress.com/book/view/1430210559

You can add your solution to the RichFaces Cookbook if you have time and intention: http://www.jboss.org/community/docs/DOC-11852

[francof]

Thank you again.

I did not realize I could add articles to the Cookbook.

I will write this up.

[fmarwede]

Thanks for the book tip. Nice completion for the RF "canon" - dev guide, forum, live demo. Maybe it's a good idea to put a link on a more prominent place...

[francof]

Sergey,

Posted my article to the cookbook.

http://www.jboss.org/community/docs/DOC-13332

Thanks for your guidance.
Franco

[sergeysmirnov]

Thank you Franco. Good article!

[monkeyden]

Thanks for this Franco. Exactly what I needed.

[francof]

You are most welcome, glad I could be of help.


Regards
Franco