rich:Jquery not working when use in a facelet component

Question

I've created a component that manages postal codes using mask with a rich:jquery,

Here the code of the component:

<h:inputText id="#{id}-postalCode" value="#{myBeanPath.postalCode}" size="7" />
 <rich:jQuery selector="#postalCode"  query="mask('a9a 9a9')" timing="onload" />

It works fine in a standard jsf page, but not when it's in a facelet component.

Is there a way to make rich:jQuery work in a facelet component?

Answer 1

After playing for awhile with the component It's seem that the jquery code is generated differently in a facelet component that directly in the page. The HTML rendered on a standart JSF page will look like this :

 <td><script type="text/javascript">//<![CDATA[
  jQuery(document).ready(function() {
    var selector = "#clientForm\\:postalCode";
    try {
        selector = eval("#clientForm\\:postalCode");
    } catch (e) {}
    jQuery(selector).mask('a9a 9a9');
 });

But in a component the code is

   <td><script type="text/javascript">//<![CDATA[
  jQuery(document).ready(function() {
    var selector = "#postalCode";
    try {
        selector = eval("#postalCode");
    } catch (e) {}
    jQuery(selector).mask('a9a 9a9');
 });

Adding the id and the name of the form directly in the jquery selector fix the problem so the final code look like this:

<h:inputText id="#{id}-postalCode" value="#{myBeanPath.postalCode}" size="7" /> 
<rich:jQuery selector="#{form}\\:#{id}-postalCode" query="mask('a9a 9a9')" timing="onload" />

Should work fine.