Rendering a component using AJAX

Question

I have the following HTML/JSF elements in a JSF form:

<div class="btn-group" data-toggle="buttons-radio">
    <h:commandButton type="button" styleClass="btn btn-inverse" value="One Way"><f:ajax render="flexibleDates" listener="#{searchFlightsBean.setDirectionOneWay}"/></h:commandButton>
    <h:commandButton type="button" styleClass="btn btn-inverse" value="Round Trip"><f:ajax render="flexibleDates" listener="#{searchFlightsBean.setDirectionRoundtrip}"/></h:commandButton>
</div>

<h:panelGrid columns="2" id="flexibleDates" rendered="#{searchFlightsBean.directionInd.label == 'Return'}">
    <h:selectBooleanCheckbox value="#{searchFlightsBean.flexibleDates}" styleClass="flight-results-left-padding checkbox inline"/>
    <h:outputText value="+/- 3 days"/>
</h:panelGrid>

I have code in the backend bean like so:

public void setDirectionOneWay(AjaxBehaviorEvent event)
{
    this.directionInd = DirectionInd.ONEWAY;
    log.info("setting direction to oneway " + directionInd.label);
}

public void setDirectionRoundtrip(AjaxBehaviorEvent event)
{
    this.directionInd = DirectionInd.RETURN;
    log.info("setting direction to return " + directionInd.label);
}

The logs reflect that the code is working just fine.

However, the panelGrid that is supposed to get rendered stays visible, showing no sign. Does anyone have an idea what's going wrong?

@Daniel Thanks, that's the solution I needed! – Skytiger Sep 16 '13 at 10:26 — Skytiger, Sep 16 '13 at 10:26

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

You should add wrapper to that h:panelGrid and point to it in your f:ajax instead of the original h:panelGrid

For example:

<f:ajax render="flexibleDatesWrapper"...


<h:panelGroup id="flexibleDatesWrapper">
    <h:panelGrid columns="2" id="flexibleDates" rendered="#{searchFlightsBean.directionInd.label == 'Return'}">
        <h:selectBooleanCheckbox value="#{searchFlightsBean.flexibleDates}" styleClass="flight-results-left-padding checkbox inline"/>
        <h:outputText value="+/- 3 days"/>
    </h:panelGrid>
</h:panelGroup>

Read this question/answer

edited May 23 '17 at 12:20

Community

1
1

answered Sep 16 '13 at 10:22

Daniel

36,833
10
119
200

Thank you for elaborating. I read the other question, but didn't fully understand it. Should I still user `render` in the ajax element like you said in your code, or should I use `update`? (Just want to be clear) – Skytiger Sep 16 '13 at 10:27
1

You are welcome, you should use `render`. In the other question the user was using primefaces library in which they use `p:ajax` with `update` attribute instead of `render` and `process` instead of `execute` but the idea is the same (using wrapper and pointing to it) – Daniel Sep 16 '13 at 10:48

Rendering a component using AJAX

1 Answers1