JSF Show PanelGrid row/items based on selectone menu - ajax

Question

I'm have a submit form and would like to display a row where they enter a birthdate if the relationship selected is a son or daughter.
I finally got things to work but it feels clunky and verbose with the use <p:row> Plus I couldn't get the update to work unless I used #form which then required the extra <p:ajax> on first/last name textinputs since their values would disappear if entered before a selection in the drop down was made.
This works but seems verbose
<h:form id="form2">
<p:panel header="Add a Non-Member">
<p:panelGrid>
<p:row>
<p:column>
<h:outputLabel for="fname" value="First Name: " />
</p:column>
<p:column>
<p:inputText id="fname" required="true"
value="#{memberManager.newNonMember.first_name}" >
<p:ajax update="#form" />
</p:inputText>
</p:column>
<p:column>
<p:message for="fname"></p:message>
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputLabel for="lname" value="Last Name: " />
</p:column>
<p:column>
<p:inputText id="lname" required="true"
value="#{memberManager.newNonMember.last_name}" >
<p:ajax update="#form" />
</p:inputText>
</p:column>
<p:column>
<p:message for="lname"></p:message>
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="Relationship: " />
</p:column>
<p:column>
<p:selectOneMenu id="relationship" value="#{memberManager.newNonMember.type}" required="True"
requiredMessage="Relationship is required for non-member">
<f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{memberManager.relationTypes}" var="type" itemValue="#{type}" itemLabel="#{type.label}" />
<p:ajax update="#form" />
</p:selectOneMenu>
</p:column>
<p:column>
<p:message for="relationship" />
</p:column>
</p:row>
<p:row id="birthrow">
<p:column>
<h:outputLabel for="nm_birth_date" value="#{memberManager.newNonMember.type.label}'s Birthdate: "
rendered="#{memberManager.newNonMember.type.label == 'Son'|| memberManager.newNonMember.type.label == 'Daughter'}" />
</p:column>
<p:column>
<p:calendar id="nm_birth_date" showOn="button" navigator="true" value="#{memberManager.newNonMember.birth_date}"
rendered="#{memberManager.newNonMember.type.label == 'Son'|| memberManager.newNonMember.type.label == 'Daughter'}"
required="#{memberManager.newNonMember.type.label == 'Son'|| memberManager.newNonMember.type.label == 'Daughter'}"
pattern="MM/dd/yyyy" mask="true"
requiredMessage="Your #{memberManager.newNonMember.type.label}'s Birthdate is required" />
</p:column>
<p:column>
<p:message for="nm_birth_date"></p:message>
</p:column>
</p:row>
</p:panelGrid>
<br />
<p:commandButton value="Add" action="#{memberManager.addAction}" ajax="false" />
</p:panel>
</h:form>
When I kept the panelGrid but used update="birthrow" on just the selectOneMenu ajax and removed the inputText ajax the birthdate row didn't update as expected, including after form was submitted with errors (ie last name required, then the ajax update stopped working)
Originally I wasn't using p:row or p:column but instead the columns attribute on the panel grid. But based on this How to rendered <p:selectOneMenu> by BalusC I knew I needed a wrapper component which is why I went the p:row route.
But is there a cleaner way to not use all the p:rows and extra ajax on the text inputs?

Answer 1

You could just have wrapped individual cells in a <h:panelGroup> without the need for all that <p:row><p:column> verbosity.
<h:panelGroup id="birthdateLabel">
<h:outputLabel ... />
</h:panelGroup>
<h:panelGroup id="birthdateInput">
<p:calendar ... />
</h:panelGroup>
<p:message ... />
To update them, just use update="birthdateLabel birthdateInput".