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 responses to “Setting focus on a component with RichFaces”

  1. Eric Ford Avatar
    Eric Ford

    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.

    Reply
  2. max Avatar
    max

    Use this:
    Reply
  3. kevin Avatar
    kevin

    Hi Max

    I can’t set focus to rich:editor in a modal panel. Any suggestions?

    Thanks

    Reply
  4. max Avatar
    max

    @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.

    Reply
  5. Poner el foco en un control con RichFaces « Compartir el conocimiento – Esteban de Ortúzar Avatar
    Poner el foco en un control con RichFaces « Compartir el conocimiento – Esteban de Ortúzar

    […] http://mkblog.exadel.com/2010/05/setting-focus-on-a-component-with-richfaces/ […]

    Reply
  6. Maarten van Leunen Avatar
    Maarten van Leunen

    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)

    Reply

Leave a reply to Poner el foco en un control con RichFaces « Compartir el conocimiento – Esteban de Ortúzar Cancel reply