Setting focus on a component with RichFaces

Some time ago I blogged on how to set focus on a component after an Ajax request in RichFaces. As a quick review, every tag that fires an Ajax request has focus attribute which points to the id of the component on which to set focus after the request. It works fine but only for simple tags such as from h: tag library. When you start using components from rich: tag library such as rich:calendar, there are several focusable elements which are rendered and the above approach won’t work.

There is a workaround, let’s take rich:calendar as an example.


   ...
   
   

The above won’t set the focus because of the problem I described. Using Firebug we can find the input field that was rendered and its id. Here is the rendered HTML:


We can now see that client id of the input field is j_id2:calInputDate. form is the form id, cal is calendar id and then InputDate is appended as well. So, we would have use form:calInputDate as the client id in focus.


   ...
   
   

Another and better option is to use #{rich:clientId}, one of the built-in JavaScript functions in RichFaces:


   ...
   
   

This way we don’t have to worry about the form id.

You can always view all RichFaces components by going to RichFaces Components Demo.

6 thoughts on “Setting focus on a component with RichFaces

  1. This approach does not seem to work with a modal dialog. I have an a4j:commandLink that displays a modal dialog for user login. I’d like to set focus on the ‘username’ input when the dialog is displayed. The form id is ‘loginForm’. I’ve tried “username’, loginForm:username’ ids directly as well as with each of the javascript functions with no luck.

  2. @kevin: I never tried a rich:editor inside a modal panel. I’d first try rich:editor inside the page (not in in modal panel). You probably need to find the input area/element.

  3. I was planning to use focus=”stuff” to set the focus properly, after loosing the focus because of a reRender in the a4j:support.

    However, I’d like “focus” to be variable. So, for instance in a a4j:support:
    onbeforedomupdate=”javascript:storeFocus (document.activeElement)”
    reRender=”otherstuff”
    focus=”javascript.getFocusBack()”
    />

    (pseudocode)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s