How to render all Grid fields except one inputText?

Question

I have a search form which uses ajax. During the keyup event of the search field searchKeyFieldId, I need to update all other fields in the same panel grid.

<h:panelGrid id="myGrid" columns="4" >

    <!-- When searchKeyFieldId change ... -->
    <!-- Need to render all the myGrid EXCEPT searchKeyFieldId -->
    <h:outputText value="search key"/>
    <h:inputText id="searchKeyFieldId"
        value="#{MyController.searchKeyField}"      
        valueChangeListener="#{MyController.licenseNumberChange}" >
        <a4j:ajax event="keyup" render="myGrid" />
    </h:inputText>

    <h:outputText value=""/>
    <h:outputText value=""/>

    <!-- Target render fields -->   
    <h:outputText value="text1"/>
    <h:inputText id="field1"
        value="#{MyController.field1}"/>

    <h:outputText value="text2"/>
    <h:inputText id="field2"
        value="#{MyController.field2}"/>

    <h:outputText value="text3"/>
    <h:inputText id="field3"
        value="#{MyController.field3}"/>
    .....   
</h:panelGrid>

However, when I use render="myGrid", then the search field is also updated and therefore loses focus. The enduser has to click/focus the input field again to continue typing.

So, I need to update only the specific fields as follows:

<a4j:ajax event="keyup" render="field1 field2 field3 field4 field5 ..." />

However, I have a lot of fields, 40 to be precise, this solution would not be a good practice.

score 3 · Accepted Answer · edited May 23 '17 at 12:18

this solution would not be a good practice

Sorry, but this is ridiculous. It does exactly the job you want and is thus the right approach. Get yourself over it and type them all down. You can if necessary hide the boilerplate away behind a bean property.

render="#{MyController.clientIdsToRender}"

You can if necessary autopopulate the string based on the JSF component tree, but writing the code for that would require more characters than necessary to hardcode the client IDs already definied in the view.

There's no other way in standard JSF nor RichFaces. PrimeFaces, however, offers an alternative in flavor of PrimeFaces Selectors (PFS). See also this related question: How to exclude child component in ajax update of a parent component?

A completely different alternative would be to split the panel grid in two panel grids, one containing the search input and another containing the to-be-updated fields. You can align them out with a good shot of CSS, if necessary.

How to render all Grid fields except one inputText?

1 Answers1