Using bootstrap-toggle with JSF

Question

I would like to use bootstrap-toggle (http://www.bootstraptoggle.com/) with JSF. However it doesn't detect the change in the checkbox. Here is my example (based on this answer Ajax render not working on SelectBooleanCheckbox):

<h:form id="searchForm">
  <h:panelGroup id="searchPanel">    
    <h:selectBooleanCheckbox binding="#{searchCheckbox}" value="true" pt:data-toggle="toggle">
      <f:ajax render="searchForm:searchPanel" />
    </h:selectBooleanCheckbox>
    <h:panelGroup rendered="#{searchCheckbox.value}">
      aaa
    </h:panelGroup>
    <h:panelGroup rendered="#{not searchCheckbox.value}">
      bbb
    </h:panelGroup>
  </h:panelGroup>
</h:form>

If I remove pt:data-toggle="toggle" it works correctly and I see "aaa" when the checkbox is enabled and "bbb" when it is disabled. However if I don't remove it I see the On-Off toggle button, but I always see "aaa" when I change the value.

Any idea of how to solve this?

Aliuk · Accepted Answer · 2016-07-23T16:20:41.000

Finally I got the solution. The problem was that the event created by jsf was onclick and it had to be onchange. This is how it worked:

<h:form id="searchForm">
  <h:selectBooleanCheckbox binding="#{searchCheckbox}" value="true" pt:data-toggle="toggle">
    <f:ajax event="change" render="searchForm:searchPanel" />
  </h:selectBooleanCheckbox>
  <h:panelGroup id="searchPanel">
    <h:panelGroup rendered="#{searchCheckbox.value}">
      aaa
    </h:panelGroup>
    <h:panelGroup rendered="#{not searchCheckbox.value}">
      bbb
    </h:panelGroup>
  </h:panelGroup>
</h:form>

Using bootstrap-toggle with JSF

1 Answers1