Property Not Set
I was trying to use a4j (I tired both 3.2.2 and 3.3.0) to create a multi-level selection. It would begin with a set of radio-buttons. When a button is clicked, based on the selection, a second level of either another set of radio or drop-down list would be displayed. There would be a max of 3 levels. The problem was neither "detailBean.serviceInstanceSelected" nor "detailBean.productClassServiceInstanceSelected" property (in the second level) in the backing bean was never got populated(their setters were never invoked). The rendering of the 3rd level selection was depending on the value of the those properties. I wonder if I was using the right tags. If not, is there any suggestion of how to correct the problem. The following is the code for this multi-level selection:
<h:form id="searchCriteriaForm" accept="text/html" acceptCharset="UTF-8" enctype="UTF-8">
<!-- Level 1 Begins -->
<h:panelGrid id="level1" columns="5">
<h:selectOneRadio value="#{detailBean.productClassSelected}">
<a4j:support event="onclick" reRender="inner2"/>
<f:selectItems value="#{detailBean.productClasses}"/>
</h:selectOneRadio>
</h:panelGrid>
<!-- Level 1 Ends -->
<!-- Inner 2 Begins -->
<h:panelGroup id="inner2">
<h:panelGrid id="level2a" columns="5" rendered="#{detailBean.secondLevelServiceInstanceDisplayable}">
<h:graphicImage id="arrow2a" width="93" height="65" hspace="10" align="left" alt="" url="images/arrow.gif" rendered="#{detailBean.secondLevelServiceInstanceDisplayable}"/>
<h:outputText id="select2a" value="Make a selection" rendered="#{detailBean.secondLevelServiceInstanceDisplayable}"/>
<h:selectOneMenu id="serviceInstance2a" value="#{detailBean.serviceInstanceSelected}" rendered="#{detailBean.secondLevelServiceInstanceDisplayable}">
<f:selectItems value="#{detailBean.serviceInstanceItems}"/>
</h:selectOneMenu>
<br/><br/>
<h:commandButton id="viewDetail2a" value="View details" action="nextPage" rendered="#{detailBean.secondLevelServiceInstanceDisplayable}"/>
</h:panelGrid>
<h:panelGrid id="level2b" columns="5" rendered="#{detailBean.secondLevelProductClassServiceInstanceDisplayable}">
<h:graphicImage id="arrow2b" width="93" height="65" hspace="10" align="left" alt="" url="/images/arrow.gif" rendered="#{detailBean.secondLevelProductClassServiceInstanceDisplayable}"/>
<h:outputText id="select2b" value="Make a selection" rendered="#{detailBean.secondLevelProductClassServiceInstanceDisplayable}"/>
<h:selectOneRadio id="productClassServiceInstance2b" value="#{detailBean.productClassServiceInstanceSelected}" rendered="#{detailBean.secondLevelProductClassServiceInstanceDisplayable}">
<a4j:support event="onclick" reRender="inner3"/>
<f:selectItems value="#{detailBean.productClassServiceInstanceItems}"/>
</h:selectOneRadio>
<br/><br/>
</h:panelGrid>
</h:panelGroup>
<!-- Inner 2 Endd -->
<!-- Inner 3 Begins -->
<h:panelGroup id="inner3">
<h:panelGrid id="level3" columns="5" rendered="#{detailBean.thirdLevelServiceInstanceDisplayable}">
<h:graphicImage id="arrow3" width="93" height="65" hspace="10" align="left" alt="" url="images/arrow.gif" rendered="#{detailBean.thirdLevelServiceInstanceDisplayable}"/>
<h:outputText id="select3" value="Make a selection" rendered="#{detailBean.thirdLevelServiceInstanceDisplayable}"/>
<h:selectOneMenu id="serviceInstance3" value="#{detailBean.serviceInstanceSelected}" rendered="#{detailBean.thirdLevelServiceInstanceDisplayable}">
<f:selectItems value="#{detailBean.serviceInstanceItems}"/>
</h:selectOneMenu>
<br/><br/>
<h:commandButton id="viewDetail3" value="View details" action="nextPage" rendered="#{detailBean.thirdLevelServiceInstanceDisplayable}"/>
</h:panelGrid>
</h:panelGroup>
<!-- Inner 3 Ends -->
</h:form>
The following is the HTML that was generated:
<form id="searchCriteriaForm" name="searchCriteriaForm" method="post" action="/detail.jsf" accept="text/html" enctype="UTF-8">
<!-- Level 1 Begins -->
<table id="searchCriteriaForm:level1"><tbody><tr><td><table><tr><td><input id="searchCriteriaForm:j_id14:0" type="radio" name="searchCriteriaForm:j_id14" value="2" onclick="A4J.AJAX.Submit('_viewRoot','searchCriteriaForm',event,{'parameters':{'searchCriteriaForm:j_id15':'searchCriteriaForm:j_id15'} ,'actionUrl':'/eBill/pages/usageDetail.jsf','similarityGroupingId':'searchCriteriaForm:j_id15'} )" /><label for="searchCriteriaForm:j_id14:0"> Home phone</label></td>
<td><input id="searchCriteriaForm:j_id14:1" type="radio" name="searchCriteriaForm:j_id14" value="3" onclick="A4J.AJAX.Submit('_viewRoot','searchCriteriaForm',event,{'parameters':{'searchCriteriaForm:j_id15':'searchCriteriaForm:j_id15'} ,'actionUrl':'/detail.jsf','similarityGroupingId':'searchCriteriaForm:j_id15'} )" /><label for="searchCriteriaForm:j_id14:1"> Internet Services</label></td><td><input id="searchCriteriaForm:j_id14:2" type="radio" name="searchCriteriaForm:j_id14" value="4" onclick="A4J.AJAX.Submit('_viewRoot','searchCriteriaForm',event,{'parameters':{'searchCriteriaForm:j_id15':'searchCriteriaForm:j_id15'} ,'actionUrl':'/detail.jsf','similarityGroupingId':'searchCriteriaForm:j_id15'} )" /><label for="searchCriteriaForm:j_id14:2"> Telus TV</label></td></tr></table></td><td></td><td></td><td></td><td></td></tr></tbody></table>
<!-- Level 1 Ends -->
<!-- Inner 2 Begins -->
<span id="searchCriteriaForm:inner2"></span>
<!-- Inner 2 Ends -->
<!-- Inner 3 Begins -->
<span id="searchCriteriaForm:inner3"></span>
<!-- Inner 3 Ends -->
<input type="hidden" name="searchCriteriaForm_SUBMIT" value="1" />
<input type="hidden" name="autoScroll" />
</form>
Thanks alot.