Setting a command button to selected by default

Question

I have a form in which I needed to have radio buttons that look like bootstrap toggle buttons. I achieved this by using command buttons in a button group, and setting the attribute data-toggle="buttons-radio", like so:

<div id="flightChoiceButtons" 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>

The problem I'm stuck with right now is that I need the "Round Trip" button to be selected, or in the down state, when the page loads. I don't need the button's ajax call to be fired, because the data displayed on the page is already in the state it needs to be in.

Anyone have any ideas?

If any more information is needed I'd be glad to supply it.

Answer 1

The bootstrap button's active state is identified by presence of active style class. Knowing that, you can just let JSF print the style class conditionally. The way how your model is setup is unclear, so here's just a kickoff example provided that you've a #{searchFlightsBean.direction} property returning an enum.

<h:commandButton ... styleClass="btn btn-inverse #{searchFlightsBean.direction == 'ONE_WAY' ? 'active' : ''}">...</h:commandButton>
<h:commandButton ... styleClass="btn btn-inverse #{searchFlightsBean.direction == 'ROUND_TRIP' ? 'active' : ''}">...</h:commandButton>

You can replace the #{searchFlightsBean.direction == '...'} part by any other boolean condition. You can find examples in this answer: Conditionally displaying JSF components.