<h:form>
<fieldset>
<h:selectManyListbox id="listbox" value="#{form.items}">
<f:selectItems value="#{form.allItems}">
</h:selectManyListbox>
</fieldset>
<h:commandButton value="Get Table" action="#{form.getTable}">
<f:ajax render="result_table" execute="listbox" />
</h:commandButton>
<h:panelGrid id="result_table">
<table>
<thead></thead>
<tbody>
<ui:repeat var="table" value="#{form.resultTable}">
<tr>
<td>#{table.name}</td>
<td>
<h:selectBooleanCheckbox binding="#{showMore}">
<f:ajax render="inner" />
</h:selectBooleanCheckbox>
</td>
</tr>
<tr>
<td>
<h:panelGrid id="inner" rendered="#{not empty showMore.value and showMore.value}">
<table></table>
</h:panelGrid>
</td>
</tr>
</ui:repeat>
</tbody>
</table>
</h:panelGrid>
</h:form>
I have executed the checkbox sample code from BalusC here .
When I click the command button, based on the values of the list box, it generates the result of the table that I display in h:panelGrid id="result_table". This command button works. Inside the generated table, I have some sub-tables that I want to display, but only if I check the box to show them. For checkbox, if I use render="@form", it collapses my external parent table. If I use the render="inner"checkbox to check / uncheck, it does nothing.
How do I make this work? Is this because the two ajax are in conflict?
FYI, bean, . javascript, , / .
<ui:repeat></ui:repeat> :
<h:selectBooleanCheckbox binding="#{showMore}">
<f:ajax render="inner" />
</h:selectBooleanCheckbox>
<h:panelGrid id="inner">
<h:outputText value="always" />
<h:outputText value="hidden" rendered="#{not empty showMore.value and showMore.value}" />
</h:panelGrid>