Easy way to add AJAX action to HTML element with Richfaces and Primefaces

In some cases, HTML elements still need to be used in JSF due to certain limitations.
But HTML component is lack of AJAX support.
Thus, the objective of this post is to show how to add AJAX event to a HTML element without writing any javascript.

this can be achieved with <a4j:jsFunction /> in Richfaces and <p:remoteCommand /> in Primefaces.

Steps:
1. Define the AJAX action to be invoked in xhtml.
(a) Richfaces

    <a4j:jsFunction
        name="updateIndexWhenOnclick"
        action="#{testBean.updateIndex}"
        render="[component id to render]">
    </a4j:jsFunction>

(b) Primefaces

    <p:remoteCommand 
        name="updateIndexWhenOnclick" 
        action="#{testBean.updateIndex}" 
        update="[component id to update]">
    </p:remoteCommand>

2. invoke the AJAX action in HTML element.

<input type="checkbox" onclick="updateIndexWhenOnclick();" />

Done!!