JBoss.orgCommunity Documentation

Chapter 15. Layout and appearance

15.1. <rich:jQuery>
15.1.1. Basic usage
15.1.2. Defining a selector
15.1.3. Event handlers
15.1.4. Timed queries
15.1.5. Named queries
15.1.6. Dynamic rendering
15.1.7. Reference data

Read this chapter to alter the layout and appearance of web applications using special components.

The <rich:jQuery> component applies styles and custom behavior to both JSF (JavaServer Faces) objects and regular DOM (Document Object Model) objects. It uses the jQuery JavaScript framework to add functionality to web applications.

Any objects or lists of objects used in the query are specified using the selector attribute. The selector attribute references objects using the following method:

Because the selector attribute can be either an id identifier attribute or CSS selector syntax, conflicting values could arise. Example 15.1, “Avoiding syntax confusion” demonstrates how to use double backslashes to escape colon characters in id identifier values.

Named queries are given a name such that they can be triggered by other functions or handlers. Use the name attribute to name the query. The query can then be accessed as though it were a JavaScript function using the specified name attribute as the function name.

Calls to the function must pass a direct reference (this) to the calling object as a parameter. This is treated the same as an item defined through the selector attribute.

If the function requires extra parameters itself, these are provided in JavaScript Object Notation (JSON) syntax as a second parameter in the JavaScript call. The options namespace is then used in the <rich:jQuery> query to access the passed function parameters. Example 15.3, “Calling a <rich:jQuery> component as a function” demonstrates the use of the name attribute and how to pass function parameters through the JavaScript calls.