Radio buttons not toggling

Question

I have radio buttons that are styled to look like bootstrap toggle buttons, as follows:

<h:panelGroup>
    <div id="sortButtons" class="btn-group" data-toggle="buttons-radio">
        <h:commandButton type="button" styleClass="btn btn-inverse active" value="Price"><f:ajax listener="#{searchResultsRoundtripBean.sortByPrice}"/></h:commandButton>
        <h:commandButton type="button" styleClass="btn btn-inverse" value="Departure"><f:ajax listener="#{searchResultsRoundtripBean.sortByTime}"/></h:commandButton>
    </div>
</h:panelGroup>

The styling looks fine, here's an image of it: http://imgur.com/W1ewjCA

The problem, however, is that clicking the buttons does not toggle them. The event hooked up to them fires, but they are not toggled. Am I doing something silly here, or is there some caveat that I'm not aware of?

Answer 1

You need to add the render attribute to your ajax tag. It defaults to 'none'. @this should probably fix your situation.

 <f:ajax render="@this" listener="..." />

http://www.jsftoolbox.com/documentation/help/12-TagReference/core/f_ajax.html

edit: @this is most likely not what your looking for, but instead @form or the container id where the list you sort is located.