In addition, RichFaces allows using either a component id or client id if you apply the query to a JSF component. When you define a selector, RichFaces examines its content and tries to replace the defined in the selector id with a component id if it's found.

For example, you have the following code:

<h:form id="form">

      <h:panelGrid id="menu">

            <h:graphicImage value="pic1.jpg" />

            <h:graphicImage value="pic2.jpg" />

      </h:panelGrid>

</h:form>

The actual id of the <h:panelGrid> table in the browser DOM is "form:menu". However, you still can reference to images inside this table using the following selector:

...

<rich:jQuery selector="#menu img" query="..." />

...

You can define the exact id in the selector if you want. The following code reference to the same set of a DOM object:

...

<rich:jQuery selector="#form\\:menu img" query="..." />

...

Pay attention to double slashes that escape a colon in the id.

In case when the "name" attribute is defined, <rich:jQuery> generates a JavaScript function that might be used from any place of JavaScript code on a page.

There is an example of how to enlarge the picture smoothly on a mouse over event and return back to the normal size on mouse out:

...

<h:graphicImage width="50" value="/images/price.png" onmouseover="enlargePic(this, {pwidth:'60px'})" onmouseout="releasePic(this)"  />

<h:graphicImage width="50" value="/images/discount.png" onmouseover="enlargePic(this, {pwidth:'100px'})" onmouseout="releasePic(this)"  />

...

<rich:jQuery name="enlargePic" timing="onJScall" query="animate({width:param.pwidth})" />

<rich:jQuery name="releasePic" timing="onJScall" query="animate({width:'50px'})"/> 

...

The JavaScript could use two parameters. The first parameter is a replacement for the selector attribute. Thus, you can share the same query, applying it to the different DOM objects. You can use a literal value or a direct reference for an existing DOM object. The second parameter can be used to path the specific value inside the query. The JSON syntax is used for the second parameter. The "param." namespace is used for referencing data inside the parameter value.

<rich:jQuery> adds styles and behavior to the DOM object dynamically. This means if you replace something on a page during an Ajax response, the applied artifacts is overwritten. But you are allowed to apply them again after the Ajax response is complete.

Usually, it could be done with reRendering the <rich:jQuery> components in the same Ajax interaction with the components these queries are applied to. Note, that queries with "timing" attribute set to "onload" are not invoked even if the query is reRendered, because a DOM document is not fully reloaded during the Ajax interaction. If you need to re-applies query with "onload" value of "timing" attribute, define the "name" attribute and invoke the query by name in the "oncomplete" attribute of the Ajax component.

RichFaces includes jQuery JavaScript framework. You can use the futures of jQuery directly without defining the <rich:jQuery> component on a page if it is convenient for you. To start using the jQuery feature on the page, include the library into a page with the following code:

...

<a4j:loadScript src="resource://jquery.js"/>

...