Question

I have a complex ICEFaces XHTML page that renders certain components conditionally, based on flags set as the user enters data on the page. What I’d like to do is direct focus to a certain field as soon as it appears, which may not be during the initial render of the page.

The ICEFaces documentation suggests that I can do this using the focus attribute of the outputBody component. Specifically:

If you setting the initial focus, the focused component must be rendered on first render call, if not then set the focus attribute only when the component gets rendered.

This seems to suggest that I can manipulate the value of the focus attribute at the time that my conditional component gets rendered. However, I don’t see any attributes of the inputText component that allow me to change a value at the time the component is rendered.

Am I misreading the documentation? When and where can I alter the value of the focus attribute of outputBody so that my conditionally-rendered field gets the input focus when it appears? Or am I using the wrong tool to solve this problem?

Answer 1

Due to the fact that I’m using both Seam and ICEFaces, I was not able to invoke Javascript reliably from my server-side Java code. I was, however, able to add the necessary Javascript in-line in my XHTML, within the ui:component that was being conditionally rendered, close to the input field I needed the focus to go to. The relevant section of my XHTML looks like this:

<ice:panelGroup id="textPanelInput" >
    <ice:form id="textInputForm"  partialSubmit="true" style="vertical-align:middle;">
        <ice:inputText id="textInput"  valueChangeListener="#{appField.valueChangeListener}"
                       size="#{appField.fieldDefLengthAsInt}" 
                       value="#{appField.value}"
                       styleClass="fieldStyle" rendered="#{appField!=null}"
                       >                    
        </ice:inputText>
        <ice:message id="jo" for="textInput" />
    </ice:form>
</ice:panelGroup>
<script type="text/javascript">document.getElementById('panelsFields:0:textInputForm:textInput').focus();</script>

The Javascript line at the bottom is the line I added to solve my problem. All of the code above is in a ui:component block that may or may not be rendered, based on other conditions. When this ui:component block is rendered, my Javascript goes with it, and sets the input focus to my desired input field.