Set focus on an element that has been partially rendered

Question

I have a form with an input element that updates a panel containing form elements on a blur event. I want the user to be able to navigate using the tab key. So leaving the first input using the tab should give focus to the first form element of the rendered form.

Input element with blur event:

<h:inputText class="text" id="profileLocation" value="#{cc.attrs.managedBean.profileLocation}">
    <f:validateRegex pattern="([A-Z]{2}[A-Z0-9])(?:\.(\d+))?(\.\d+)?(\.\d+)?" />
    <f:ajax event="blur" render="assertionLocationPanel" listener="#{cc.attrs.managedBean.updateMessageLocation}"/>
</h:inputText>

It will render the assertionLocationPanel defined as:

<p:outputPanel id="assertionLocationPanel">
    <h:inputText value="#{cc.attrs.managedBean.property}">
    </h:inputText>
</p:outputPanel>

When using the tab key, the panel is updated but the focus is not on the input element. I guess this is because of the rendering. If the panel is not updated, the focus is set to the correct element.

Solution

Call a javascript function specified in the onevent attribute:

<f:ajax event="blur" render="profileLocationErrorMessage assertionLocationPanel" listener="#{cc.attrs.managedBean.updateMessageLocation}" onevent="setFocus"/>

the define the JS function as:

<script type="text/javascript">  
    function setFocus() {
        $('#ConditionalComposite-ConditionalForm-1-ProfileLocation-segmentInstanceNumber').focus();
    }  
</script>

I had to call the JS function setFocus instead of calling $('#ConditionalComposite-ConditionalForm-1-ProfileLocation-segmentInstanceNumber').focus(); in the onevent attribute because it did not work. I kept the generated ids because I use composite, also I redefined javax.faces.SEPARATOR_CHAR to -.

If you using the regular : separator, you have to escape the separator as #ConditionalComposite\\:ConditionalForm1\\:ProfileLocation\\:segmentInstanceNumber.

If you find an answer to your own question, post it as an answer and accept it. This is the recommended practice. On another note, your javascript-function will execute the the `focus()` three times (once for each phase of the ajax-request). To prevent that, it should take a parameter called `data`, and only execute the `focus()` if `data.status == 'success'`. — Björn Pollex, Aug 30 '11 at 20:37

score 2 · Accepted Answer · answered Aug 11 '11 at 08:45

Have you tried this;

At first give an id to inputText under outpupanel.

<p:outputPanel id="assertionLocationPanel">
<h:inputText value="#{cc.attrs.managedBean.property}" id="assertioninput">
</h:inputText>

then add ajax complete event like this and oncomplete focus on the input you want.

<a4j:ajax event="complete"  render="assertionLocationPanel" oncomplete="assertioninput.focus();"/>

by the way dont forget to set form prependid=false in order to directly call the id of inputtext

I accept your answer because it helped me to find a solution. I updated my question with the solution inside. The concept is similar to what you advised. Thanks. — Sydney, Aug 11 '11 at 14:26

Set focus on an element that has been partially rendered

1 Answers1