New jQuery & cie functions

RichFunction.java

public final class RichFunction {
    private static final int DEFAULT_ESCAPING_LENGTH = 4;

    /**
     * The rich:jQuerySelector('id') function is a shortcut for the equivalent rich:jQuerySelectorExt('id',4)
     * since 4 is the default escaping length for usage inside a JSF component.
     */
    @Function
    public static String jQuerySelector(String id) {
        return jQuerySelectorExt(id, DEFAULT_ESCAPING_LENGTH);
    }

    /**
     * The rich:jQuerySelectorExt('id','escapingLength') function will perform nearly the same function as
     * rich:clientId('id') but will transform the resulting id into a jQuery id selector which means that it
     * will add a "#" character at the beginning but also escape all ":" characters since they are reserved
     * characters in CSS selectors. Depending on the context of usage, the length of the escaping might change.
     * For example, it will probably be 2 if you want to use it inside a HTML tag but 4 (the default value) if
     * you want to use it inside inside a JSF component.
     */
    @Function
    public static String jQuerySelectorExt(String id, int escapingLength) {
        String jQuerySelector = clientId(id);
        if (jQuerySelector != null) {
            StringBuilder escaping = new StringBuilder(1+escapingLength);
            for(int i = 0; i < escapingLength; ++i) {
                escaping.append("\\");
            }
            escaping.append(":");
            return "#" + jQuerySelector.replaceAll(":", escaping.toString());
        }

        return null;
    }

    /**
     * The rich:jQuery('id') function is a shortcut for the equivalent rich:jQueryExt('id',4) since 4 is the default
     * escaping length for usage inside a JSF component.
     */
    @Function
    public static String jQuery(String id) {
        return jQueryExt(id, DEFAULT_ESCAPING_LENGTH);
    }

    /**
     * The rich:jQueryExt('id', 'escapingLength') function is a shortcut for the equivalent
     * jQuery('#{rich:jquerySelector('id','escapingLength')}') code. It returns the jQuery object from the client,
     * based on the passed server-side component identifier. If the specified component identifier is not found,
     * null is returned instead. The function takes care of escaping ":" character if you are using it as JSF id
     * separator (it's the default value). You can specify the length of the escaping depending on your context.
     */
    @Function
    public static String jQueryExt(String id, int escapingLength) {
        String jQuerySelector = jQuerySelectorExt(id, escapingLength);
        if (jQuerySelector != null) {
            return "jQuery('" + jQuerySelector + "')";
        }

        return null;
    }
}

test-generated.xhtml

<table cellpadding="5px">
<tbody>
<tr>
<td><a onclick="jsf.util.chain(this,event,'jQuery(\'#testForm\\\\:modalCreate\').modal(\'show\');','mojarra.jsfcljs(document.getElementById(\'j_idt57\'),{\'j_idt57:j_idt60\':\'j_idt57:j_idt60\'},\'\')');return false" href="#">Show h:commandLink</a></td>
</tr>
<tr>
<td><input type="submit" onclick="jQuery('#testForm\\:modalCreate').modal('show');" value="Show h:commandButton" name="j_idt57:j_idt107"></td>
</tr>
<tr>
<td><a onclick="mojarra.ab(this,event,'action',0,0,{'onevent':jQuery('#testForm\\:modalCreate').modal('show');});return false" href="#" id="j_idt57:j_idt137">Show h:commandLink Ajax</a></td>
</tr>
<tr>
<td><input type="submit" onclick="mojarra.ab(this,event,'action',0,0,{'onevent':jQuery('#testForm\\:modalCreate').modal('show');});return false" value="Show h:commandButton Ajax" name="j_idt57:j_idt62" id="j_idt57:j_idt62"></td>
</tr>
<tr>
<td><a onclick="jsf.util.chain(this,event,&quot;jQuery('#testForm\\\\:modalCreate').modal('show');&quot;,&quot;RichFaces.ajax(\&quot;j_idt57:j_idt110\&quot;,event,{\&quot;incId\&quot;:\&quot;1\&quot;} )&quot;);return false;" name="j_idt57:j_idt110" id="j_idt57:j_idt110" href="#">Show a4j:commandLink</a></td>
</tr>
<tr>
<td><input type="submit" value="Show a4j:commandButton" onclick="jsf.util.chain(this,event,&quot;jQuery('#testForm\\\\:modalCreate').modal('show');&quot;,&quot;RichFaces.ajax(\&quot;j_idt57:j_idt112\&quot;,event,{\&quot;incId\&quot;:\&quot;1\&quot;} )&quot;);return false;" name="j_idt57:j_idt112" id="j_idt57:j_idt112"></td>
</tr>
<tr>
<td><button value="Show rb:commandButton server" type="submit" onclick="jsf.util.chain(this,event,&quot;jQuery('#testForm\\\\:modalCreate').modal('show');&quot;,&quot;RichFaces.submitForm(event.form, event.itemId)&quot;);return false;" name="j_idt57:j_idt124" id="j_idt57:j_idt124" class="btn   ">Show rb:commandButton server</button></td>
</tr>
<tr>
<td><button value="Show rb:commandButton ajax" type="submit" onclick="jsf.util.chain(this,event,&quot;jQuery('#testForm\\\\:modalCreate').modal('show');&quot;,&quot;RichFaces.ajax(\&quot;j_idt57:j_idt64\&quot;,event,{\&quot;incId\&quot;:\&quot;1\&quot;} )&quot;);return false;" name="j_idt57:j_idt64" id="j_idt57:j_idt64" class="btn   ">Show rb:commandButton ajax</button></td>
</tr>
<tr>
<td><button value="Show rb:commandButton client" type="button" onclick="jQuery('#testForm\\:modalCreate').modal('show');;return false;" name="j_idt57:j_idt65" id="j_idt57:j_idt65" class="btn   ">Show rb:commandButton client</button></td>
</tr>
</tbody>
</table>

test.xhtml

<h:form>
    <h:panelGrid columns="1" cellpadding="5px">
        <h:commandLink action="none" value="Show h:commandLink" 
            onclick="#{rich:jQuery('modalCreate')}.modal('show');" />
        
        <h:commandButton action="none" value="Show h:commandButton" 
            onclick="#{rich:jQuery('modalCreate')}.modal('show');" />
        
        <h:commandLink action="none" value="Show h:commandLink Ajax">
            <f:ajax onevent="#{rich:jQuery('modalCreate')}.modal('show');"/>
        </h:commandLink>
        
        <h:commandButton action="none" value="Show h:commandButton Ajax">
            <f:ajax onevent="#{rich:jQuery('modalCreate')}.modal('show');"/>
        </h:commandButton>
        
        <a4j:commandLink value="Show a4j:commandLink" onclick="#{rich:jQuery('modalCreate')}.modal('show');"/>
        
        <a4j:commandButton value="Show a4j:commandButton" onclick="#{rich:jQuery('modalCreate')}.modal('show');"/>
        
        <rb:commandButton value="Show rb:commandButton server" mode="server" onclick="#{rich:jQuery('modalCreate')}.modal('show');"/>
        
        <rb:commandButton value="Show rb:commandButton ajax" mode="ajax" onclick="#{rich:jQuery('modalCreate')}.modal('show');"/>
        
        <rb:commandButton value="Show rb:commandButton client" mode="client" onclick="#{rich:jQuery('modalCreate')}.modal('show');"/>
    </h:panelGrid>
</h:form>