Q:

Update screen content based on select box change using f:ajax

I'm using JSF2 with Richfaces 4.
I have the following JSF:
<h:panelGrid columns="2" cellspacing="5">
    <h:outputLabel value="#{msg.FrequencyOfSpending}" />

    <h:selectOneMenu id="ruleFrequencyOptions" value="#{Rule.ruleControls.ControlOne.controlParams.Period.valueSelected}" styleClass="commonSelect">
        <f:selectItems value="#{Rule.ruleControls.ControlOne.controlParams.Period.validValues}" itemLabelEscaped="true" />
        <f:ajax event="valueChange" listener="#{Rule.ruleControls.ControlOne.controlParams.Period.valueSelectedChange}" onerror="handleAjaxError" />
    </h:selectOneMenu>
</h:panelGrid>

<a4j:repeat value="#{Rule.ruleParams.Action.properties}" var="RuleParamProperty" id="budgetRuleIterator">

    <h:panelGrid columns="4" cellspacing="5" columnClasses="ruleParamCheckbox, ruleParamAction, ruleParamActionFrequency, ruleParamActionInput">

        <h:selectBooleanCheckbox value="#{RuleParamProperty.selected}">
            <a4j:ajax event="click" listener="#{RuleParamProperty.selectedChange}"  onerror="handleAjaxError" />
        </h:selectBooleanCheckbox>

        <h:outputText value="#{msg[RuleParamProperty.name]}" />

        <h:panelGrid columns="3">
            <h:outputText value="#{msg.Action_1}" />
            <h:outputText value="#{msg[Rule.ruleControls.ControlOne.controlParams.Period.valueSelected]}" id="ruleActionFrequency" class="italic-text" />   
            <h:outputText value="#{msg.Action_3}" />
        </h:panelGrid>

        <h:inputText value="#{RuleParamProperty.inputValue}" />

    </h:panelGrid>

</a4j:repeat>

Every time someone selects a new value from the ruleFrequencyOptions select box, I need the new value to be reflected/shown here:
<h:outputText value="#{msg[Rule.ruleControls.ControlOne.controlParams.Period.valueSelected]}" id="ruleActionFrequency" class="italic-text" />

Assigning an Id to the h:outputText and using the render attribute on f:ajax does not work due to JSF's beautifull auto generation of Id's!

Is there some method I can attach to the f:ajax compoent to achieve this?

A:

Try this:
<h:panelGroup id="toUpdate">
    <a4j:repeat value="#{Rule.ruleParams.Action.properties}" var="RuleParamProperty" id="budgetRuleIterator">
        ...
    </a4j:repeat>
</h:panelGroup>

then put render="toUpdate" in your <f:ajax>.

