Primefaces SelectBooleanCheckbox with confirmation - jsf

Question

I would like to show confirmation dialog on select/unselect checkbox in primefaces. I have tried to
<p:selectBooleanCheckBox value="#{myBean.checkBoxValue}">
<p:confirm message="Are you sure?"/>
</p:selectBoooleanCheckBox>
but it doesn't work since selectBooleanCheckBox is not Confirmable. Is there any workaround to solve this problem?

Answer 1

One way is to create your own confirmDialog like
<p:confirmDialog widgetVar="myOwnConfirmDialog" message="Confirm ?">
<p:commandButton value = "Yes"
action = "#{myBean.checkConfirmedAction}"
oncomplete = "PF('myOwnConfirmDialog').hide()"/>
<p:commandButton value = "No"
action = "#{myBean.checkCancelledAction}"
oncomplete = "PF('checkConfirmwdgt').toggle(); PF('myOwnConfirmDialog').hide()"/>
</p:confirmDialog>
and then use onchange event to open the confirmDialog:
<p:selectBooleanCheckbox value="#{myBean.checkBoxValue}"
onchange="PF('myOwnConfirmDialog').show()"
widgetVar="checkConfirmwdgt">
</p:selectBooleanCheckbox>
EDIT:
I made a typo and a mistake on my answer. The typo was actually using <p:confirm> inside <p:selectBooleanCheckbox> (you are right, selectBooleanCheckbox isnt confirmable.)
The mistake was that <p:selectBooleanCheckbox> doesn't fires onclick, but only onblur, onchange and onfocus. Using onchange will work.

Answer 2

I solved it a different way - didn´t want to wait till PrimeFaces implements the Interface.
I´m displaying two "commandButton"s - only one of them is rendered dependent on state. They are enclosed by a form - or you can use a named panel ("selectProductUsageForm" in my example) which is updated via AJAX. The first one is representing the active (toggled) state - the second the untoggled state.
The solution was to mimic the display behaviour - which Primefaces encapsulates in the CSS-class "ui-state-active" (theme.css). I copied the contents of the CSS-class to my own CSS-class "man-ui-state-active" and assigned it to the first button.
<h:form id="selectProductUsageForm"
rendered="#{productManager.mayEditSelected}">
<span class="productGroupUsageBtnContainer">
<p:commandButton
value="#{msg['product.inUseByGroup']} (#{login.currentUser.group.name})" styleClass="man-ui-state-active"
icon="ui-icon-check"
action="#{productManager.toggleCurrentProductGroupUsage}"
rendered="#{productManager.currentProductGroupUsage}" update="selectProductUsageForm">
<p:confirm message="Are you sure?"/>
</p:commandButton>
<p:commandButton value="#{msg['product.notInUseByGroup']} (#{login.currentUser.group.name})"
icon="ui-icon-close"
action="#{productManager.toggleCurrentProductGroupUsage}"
rendered="#{not productManager.currentProductGroupUsage}" update="selectProductUsageForm">
<p:confirm message="Are you sure?"/>
</p:commandButton>
</span>
</h:form>
CSS
.ui-button.man-ui-state-active {
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

Answer 3

You want to show a notification(info, alert,...) on a change of the checkbox. Do this :
<p:selectBooleanCheckBox value="#{myBean.checkBoxValue}"
onchange="if(!confirm('Your warning or information message here!!!'))
return false">
<p:ajax listener="#{myBean.yourMethodHere()}"
update="theComponentYouWantToUpdate" />
</p:selectBoooleanCheckBox>