formsinputradio-buttonbootsfaces

How to transform a radio input form to radio input bootsfaces form?


Is it possible to transform the next code to bootsfaces labels?

<div class="radio">
    <label><input type="radio" name="optradio"/>Option 1</label>
 </div>
 <div class="radio">
     <label><input type="radio" name="optradio"/>Option 2</label>
 </div>

Thank you!


Solution

  • Update July 18, 2016: Inspired by your question, I've started to implement a <b:radiobutton /> component that's more flexible than its standard JSF counterpart. It will be published with the next version of BootsFaces - probably 1.0, which is due to JavaOne 2016. Until then, follow the recipe below.

    We didn't implement <b:radioButton />yet, but you can simulate it by adding a hidden input field and some JavaScript code:

      <b:panel title="Survey" look="primary">
        <p>Which Java version do you use?</p>
        <div class="radio">
          <label onclick="$('.hidden-optradio').val(7)">
            <input type="radio" name="optradio" value="7" />
            Java 7
          </label>
        </div>
        <div class="radio">
         <label onclick="$('.hidden-optradio').val(8)">
            <input type="radio" name="optradio" value="8" />
            Java 8
          </label>
        </div>
        <h:inputText value="#{radiobuttonBean.javaVersion}" styleClass="hidden-optradio" pt:type="hidden" />
        <script>$('input[name=optradio][value=#{radiobuttonBean.javaVersion}]').attr("checked", "checked");</script>
        <b:commandButton value="submit your choice" action="#{radiobuttonBean.submit}" look="primary" />
        <b:messages />
      </b:panel>
    

    If you need AJAX, implement it by adding a hidden <b:commandButton update="someRegion" onclick="ajax:myBean.myMethod()" /> and call the click() method of this button in the onclick handlers of the labels:

    <label onclick="$('.hidden-optradio').val(8);$(.ajax-button).click();">
      <input type="radio" name="optradio" value="8" />
        Java 8
      </label>
    </div>
    ...
    <b:commandButton value="submit your choice" 
                     action="#{radiobuttonBean.submit}" look="primary" 
                     update="@form"
                     style-class="hidden ajax-button"
                     />