Search code examples
jqueryjsfrichfacesfacelets

rich:Jquery not working when use in a facelet component

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?

Solution

  • 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.