Rendering 2 elements when one depends of the content of the other

Question

I have a selectOneRadio with the choices "Voice" and "Data".

Then I have a selectOneMenu with the item "no data option" for both and then other items, which depends on the chosen radio button.

So, if I choose Voice I have in the dropdown "no data option", "Office", "Office premium" and "Office premium plus", while if I choose Data I have "no data option", "Data start", "Data medum" and "Data premium".

I solved the automatic dropdown content change with f:ajax and it works well.

Now, if in the dropdown "no data option" is selected a warning(small text near the dropdown) should appear.

So I defined an outputLabel and set the value depending of the value of the selected item in the dropdown.

All works fine until I change the choice in the radio button. for example: - the page loads and "Voice" and "no data option" are per default selected and the warning label is shown. - I select "Office" in the dropdown and the warning disappears - I then select "Data"; the dropdown refreshes with the new items and "no data option" is selected BUT the warning doesn't appear.

If I select another item in the dropdown and then come back to "no data option" it appears; It is just when I switch from "Voice" to "Data" (and vice versa) that for some reason the rendering doesn't work as I expect...

Here is my code; first the radio button with the correspondig ajax for rendering the dropdown and then the dropdown with the corresponding ajax for rendering the warning label and at the end the label, where its value depends on the selected item in the dropdown.

I hope I described the problem clear enough. If not, just ask and I'll try to be more precise :)

<h:selectOneRadio id="subscriptionType" value="#{detailModel.afterObject.subscriptionType}">
    <f:selectItems value="#{detailModel.subscriptionTypeValues}" />

    <f:ajax execute="@this" render="dataOptions" />
</h:selectOneRadio>


<h:selectOneMenu id="dataOptions" value="#{detailModel.dataOption}">
    <f:selectItems value="#{detailModel.dataOptionsBySubscriptionType}" var="sdo" itemLabel="#{sdo.dataOptionName}" itemValue="#{sdo}"/>
    <f:converter converterId="ch.ethz.id.cmn.DataOptionConverter" />

    <f:ajax execute="@this" render="noDataOptionChoosenLabel" />
</h:selectOneMenu>


<h:outputLabel id="noDataOptionChoosenLabel"
    value="#{ (detailModel.dataOption == null or detailModel.dataOption.dataOptionName == detailModel.noDataOption) ? msg.subscriptionFormNoDataOptionChoosen : ''}"
    style="font-style: italic; font-size:9px; color:red;"/>

Could you provide a very basic [SSCCE](http://sscce.org/) test case with your problem? With the managed bean code included, see [this question as an example](http://stackoverflow.com/questions/21549051/keeping-viewscoped-property-states-in-composite-component-backings). Then I'll be able to give it a try. — Aritz, Jul 11 '14 at 06:49
Then I would think you just need a listener on the f:ajax, which should reset the detailModel.dataOption. Plus the mentioned update — Jaqen H'ghar, Jul 11 '14 at 08:08
@Jaqen H'ghar Can you please write your hint as an answer so I can accept it? — Francesco, Jul 11 '14 at 10:52
Thankyou and yes - I hope I got it right :-) If not let me know — Jaqen H'ghar, Jul 12 '14 at 11:18

score 1 · Accepted Answer · answered Jul 12 '14 at 11:17

I think you expect the ajax events to "propagate" through the components, which would be nice but it does'nt work like that. You have to update and reset them manually.

So at the top level (the radio) you have to reset detailModel.dataOption and render both of the other components:

<f:ajax listener="#{detailModel.resetDataOption}"
        render="dataOptions noDataOptionChoosenLabel" 
        />

(you can omit execute="@this" as it is default) with

public void resetDataOption(AjaxBehaviorEvent event) {
    dataOption=null;
}

Rendering 2 elements when one depends of the content of the other

1 Answers1